Question

当我调整浏览器大小时，我无法阻止浮动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;
}

现在我发现，如果包含浮动项目的容器具有固定宽度，那么我的列表项将按照我想要的方式运行，而不是换行。但是，我是整个显示器宽度的容器。我尝试宽度100％，但没有用。

无论如何我可以在没有固定宽度的情况下实现这一目标吗？固定宽度在不同的显示器上看起来会有所不同，而不是边缘到边缘正确吗？

Answer 1

首先，ul只能有li个孩子，而li只能有ul或ol为了父母。

例如，

div或ul转向nav，li已删除或变为中立span。

您可以设置li而不是div和a而不是li，以便拥有有效和有效的代码。

为避免包裹li，您可以使用display:table / table-cell代替float + inline-block。（display:flex也会这样做。）

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

如果没有浮动不需要处理它，父母不再需要高度：）

使用：http://codepen.io/anon/pen/pgMmrR

Answer 2

这是一个实现我认为你需要的小提琴：https://jsfiddle.net/vuLg43ge/

<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 id="...并将ID直接添加到列表项中。我还添加了修补程序以从内联项中删除空格，请在此处阅读更多内容：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

#resultChoice li {
    height: 60px;
    width: 14%;
    display: inline-block;
    padding-top: 25px;
    color: #777;
    font-size: small;
}

在CSS中，您可以看到我为列表项添加了一个百分比宽度：width: 14%;这意味着列表中的每个项目将占用可用空间的14％。

随着屏幕缩小，您应该添加媒体查询，以使其在需要时更好看。

浮动的div停留在div容器/不包装浏览器调整大小

2 个答案: