html - float div 停留在 div 容器中/在浏览器调整大小时不换行

Question

当我调整浏览器大小时，我无法阻止我的 float div 换行。我是全新的，所以尽量忽略糟糕的编码。我可以通过绝对定位实现我想要的，但我尽量不依赖它。

HTML

<div id="secondBar">
    <ul id="resultChoice">
        <div id="all"><li><a href="">All</a></li></div>
        <div id="videos"><li><a href="">Videos</a></li></div>
        <div id="maps"><li><a href="">Maps</a></li></div>
        <div id="shopping"><li><a href="">Shopping</a></li></div>
        <div id="news"><li><a href="">News</a></li></div>
        <div id="more"><li><a href="">More</a></li></div>
        <div id="searchTools"><li><a href="">Search Tools</a></li></div>
    </ul>
</div>

CSS

#secondBar {
    height: 80px;
    margin: 0;
    background: #fff;
    border-bottom: 1px solid #ebebeb;
    width: 100%;
}
#resultChoice {
    list-style: none;
    float: left;
    padding-left: 10px;
}
#resultChoice div {
    height: 60px;
    display: inline-block;
}
#resultChoice div li {
    padding-top: 25px;
    color: #777;
    font-size: small;
}

现在我想通了，如果包含 float 元素的容器具有固定宽度，那么我的列表元素将按照我想要的方式运行，而不是包裹在下面。但是，我的容器是全显示器宽度。我试过宽度 100% 但没有用。

有没有办法在没有固定宽度的情况下做到这一点？固定宽度在不同的显示器上看起来会有所不同，而不是边到边正确吗？

Answer 1

首先，对于 child ，ul只能有li，li只能有ul 或 ol 为父级。

div 必须去或 ul 转向 nav 例如，li 删除或变成了中性的 span。

您可以使用 li 样式代替 div 和 a 代替 li，以便具有有效和功能代码。

为避免包装 li，您可以使用 display:table/table-cell 代替 float + inline-block。 (display:flex 也可以)。

例子:

#secondBar {
  margin: 0;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
}
#resultChoice {
  display: table;
  /* you may wish to center your links: */
  /*  margin:auto;
  will do */
  /* eventually add some space aside each */
  border-spacing: 10px 0;
  padding-left: 10px;
}
#resultChoice li {
  height: 60px;/* here or on ul */
  display: table-cell;
  ;
}
#resultChoice li a {
  display: block;
  padding-top: 25px;/* try to remove this and use vertical-align:bottom on li instead */
  color: #777;
  font-size: small;
}

<div id="secondBar">
  <ul id="resultChoice">
    <li id="all"><a href="">All</a>
    </li>
    <li id="videos"><a href="">Videos</a>
    </li>
    <li id="maps"><a href="">Maps</a>
    </li>
    <li id="shopping"><a href="">Shopping</a>
    </li>
    <li id="news"><a href="">News</a>
    </li>
    <li id="more"><a href="">More</a>
    </li>
    <li id="searchTools"><a href="">Search Tools</a>
    </li>
  </ul>
</div>

如果没有float就不用处理了，parent就不需要height了:)

一起玩:http://codepen.io/anon/pen/pgMmrR