Question

我想将我的ul向左移动，将列表项向右移动，使它们在div内看起来像这样：

第1项第2项第3项

CSS：

.body-nav {
width: 1090px;
margin: 0 auto 0 auto;
background-color: lightblue; }

.body-nav ul {
margin: 0;
padding: 0;
float: left;
list-style: none; }

.body-nav ul li {
float: right;
padding-right: 15px; }

我有链接看看我希望他们看起来如何。这里的问题是我失去了背景色。这些链接就在div之外。

这是我的HTML：

    <header>
    <div class="header-content">
        <img src="images/logo.png" class="logo" alt="Site Logo">
        <ul>
            <li>24/7 Support (513) 571-7809</li>
            <li><a href="#">Manage my account</a></li>
        </ul>
    </div>
</header>
<div class="body-nav">
    <ul>
        <li><a href="#">Web Hosting</a></li>
        <li><a href="#">Reseller Hosting</a></li>
        <li><a href="#">Domain Names</a></li>
        <li><a href="#">SSL Certificates</a></li>
    </ul>
</div><!--end body div-->

Answer 1

以下内容将解决您的问题（http://jsfiddle.net/76y7wbf6/1/）：

.body-nav {
    overflow:hidden;
}

问题源于使用浮点数，它在正常DOM流程之外略微迈出一步。您的.body-nav元素会失去对其子级的跟踪，并且占用的高度为0（或1px）。

另一种方法是将clearfix类应用于body-nav，它看起来像（http://jsfiddle.net/76y7wbf6/）：

.clearfix:after {
    clear:both;
    display: block;
    content: ' ';
}

我喜欢使用的一个metaphore：

使用浮动就像穿越超空间一样。它们存在，有点，并且可以影响其他DOM元素......但它们也在不同的维度平面（左右）行进。

要桥接浮动超空间旅行，您可以应用清除：自身或溢出：隐藏在其父级上。

...如果你在浮动元素的父元素上应用float，它可以提供一个自我清晰的，但是那个父元素也在穿越超空间。

Answer 2

这只是为了向您展示有简单的方法来实现您想要实现的目标（水平无序列表），而不是使用有限的方法，例如display:inline-flex或复杂/棘手的方法

底线让我们不要过于简单。

所以，

从float:left中移除.body-nav ul（没有任何意义）
将您的.body-nav ul li设置为display inline（这样li＆＃39}将显示为内联 - 而不是默认行为{{1} }

以下代码段：

＆＃13;

display:list-item

＆＃13;

.body-nav {
  width: 1090px;
  margin: 0 auto 0 auto; /* you can shorthand this to - margin:0 auto - */
  background-color: lightblue;
}
.body-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.body-nav ul li {
  display:inline;
  padding-right: 15px;
}

＆＃13;

Answer 3

为什么不使用CSS3并使用flexbox布局，而不是使用浮点数。将UL显示设置为“inline-flex”将为您提供带有浅蓝色背景的所需结果。

CSS - 无序列表问题

3 个答案:

以下代码段：