问题描述
在制作导航栏的时候,logo旁边有几个菜单选项,我把logo放在了div中,让后把菜单选项放在了ul中的li标签中,但是这时候不管怎么设置,logo的div和菜单选项的ul就是无法在一行上显示,掉了下来。
问题出现的环境背景及自己尝试过哪些方法
最外层的大盒子用了bootstrap的container布局,logo的div和ul都用了栅栏系统col-md-*来定义的宽度
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
index.html中代码如下:
<div class="container">
<div class="top">
<div class="logo col-md-2">
<img src="./images/logo.png" alt="">
</div>
<ul col-md-3>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">币币交易</a>
</li>
<li>
<a href="#">U币宝</a>
</li>
</ul>
<span class="account-balance"></span>
<span class="userAction">
<a href="#">登录</a>
<a href="#">注册</a>
</span>
<div class="language">
<span class="choose">简体中文</span>
</div>
</div>
</div>
index.css中代码如下:
.top {
height: 70px;
background-color: #ccc;
}
.top .logo {
height: 100%;
position: relative;
}
.top .logo img {
width: 80%;
height: 36px;
/* 实现实现图片竖直方向上的居中 */
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.top ul li {
background-color: #999;
height: 70px;
display: block;
float: left;
}
你期待的结果是什么?实际看到的错误信息又是什么?
能够让放置logo的div和ul在同一行上显示
ul的class写错了
应该是