Question

header ul {
  display: inline; }
  header ul .nav-header li {
    list-style: none;
    margin-right: 1em;
    float: left; }
  header ul a {
    text-decoration: none; }

*{ border: 0; margin: 0; padding: 0; }

这是我的css现在使用重置通配符似乎取消了显示：inline;有谁知道修复？

这里的问题是，如果您删除通配符，欢迎标题会显示在导航栏后面的行上。目前它在同一条线上，使用display：inline;应该删除，但没有。

http://jsfiddle.net/P8QmL/

Answer 1

您需要将display:inline应用于header而不是header ul。

您还应该删除ul中的div。

HTML：

<header>
      <ul class='nav-header'>
          <li>
            Kali @ 1000 Commercial
          </li>

            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/products">Products</a>
            </li>
            <li>
              <a href="/about">About</a>
            </li>
      </ul>
    </header>
    <section class='body-wrapper'>
      <h1>Welcome</h1>
    </section>
    <footer>
      <div class='nav-footer'>
        <ul>
          <li>
            <a href="/contact">Contact Us</a>
          </li>
        </ul>
      </div>
    </footer>

的CSS：

header {
  display: inline; }

  header .nav-header li {
    list-style: none;
    margin-right: 1em;
    float: left; }

  header ul a {
    text-decoration: none; }

Answer 2

好的，我现在明白了。

问题在于：

包含所有浮动元素的元素（例如<header>）“失去”其大小。因此，您的<header>元素的宽度和高度为0，即使它包含非零元素。因此，后续元素忽略了header元素（因为它的大小为0）并且看起来向右浮动。

有一些修复，但最好的修复可能是在后续元素上使用css clear属性：

section {
    clear: both;
}

我冒昧地改进了你的HTML＆amp; CSS：

http://jsfiddle.net/P8QmL/4/

我应该注意，这仍然没有给你的<header>元素任何大小，所以如果你希望设置标题的样式，你会注意到没有任何事情发生，因为标题的大小仍为0。因此，如果您需要标题，例如背景颜色，你必须使用不同的解决方案。给浮动子元素大小的元素最简单的方法是使用overflow: auto。这有点hacky，但它确实有效。

header {
    background-color: red;
    overflow: auto;
}

显示：内联无法正常工作

2 个答案: