CSS

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 class 应用到 body-nav，它看起来像 (http://jsfiddle.net/76y7wbf6/):

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

我喜欢用的一个比喻：[=16=]

Using floats is like traveling through hyperspace. They exist, kinda, and can impact other DOM elements... but they are also travelling at a different dimensional plane (left-right).

To bridge the float hyperspace travel, you can apply clear:both on itself or overflow:hidden on its parent.

... And if you apply float on a floating element's parent, it can provide a self-clear, but then that parent is traveling through hyperspace too.

Answer 2

为什么不使用浮动，为什么不使用 CSS3 并使用 flexbox 布局。将 UL 显示设置为 "inline-flex" 将为您提供具有浅蓝色背景的所需结果。

Answer 3

这只是为了向您展示有一些简单的方法可以实现您想要实现的目标（水平无序列表），而不是使用有限的方法，例如display:inline-flex或complicated/tricky接近

最重要的是，我们不要把简单的事情复杂化。

所以，

从您的 .body-nav ul 中删除 float:left（在那里没有意义）
将您的 .body-nav ul li 设置为 display inline（这样 li 将按其状态显示 - 内联 - 而不是默认行为 display:list-item

下面的片段：

.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;
}

<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-->

CSS - 无序列表问题

CSS - Unordered list issue

html

html-lists

下面的片段：