• 1
  • 新人请关照

ul标签和div标签不能在同一行显示?

问题描述

在制作导航栏的时候,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在同一行上显示
阅读 2.3k
评论
    2 个回答
    • 1.8k

    div和ul,都是块状元素,如果你需要让他在一行里显示,那么可以使用css把他改为行内元素即可
    style="display:inline;"

      相似问题
      推荐文章