Html 浮动div保留在div容器中/在浏览器调整大小时不换行

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

HTML

现在我明白了，如果包含浮动项的容器具有固定的宽度，那么我的列表项将按照我所希望的方式运行，而不是在下面包装。但是，我是一个容器，它是整个监视器的宽度。我尝试了100%的宽度，但没有成功

---

没有固定的宽度，我还能做到这一点吗？固定宽度在不同的显示器上看起来会不同，而不是边对边正确吗

这是一把小提琴，我认为它能满足你的需要：

在CSS中，您可以看到我为列表项添加了一个百分比宽度：

width:14%

这意味着列表中的每个项目将占用其可用空间的14%

---

当屏幕缩小时，您应该添加媒体查询，使其根据需要看起来更好。

首先，

ul

只能为儿童提供

li

，而

li

只能为家长提供

ul

或

ol

例如，

div

必须转到或

ul

转到

nav

，并且

li

被删除或变成中性

span

您可以将

li

改为

div

和

a

改为

li

，以获得有效且有效的代码

为了避免包装

li

s，可以使用

display:table

/

table cell

而不是float+inline块。（

display:flex

也可以）

例如：

#第二条{
保证金：0；
背景：#fff；
边框底部：1px实心#ebebebeb；
}
#结果选择{
显示：表格；
/*您可能希望将链接置于中心位置：*/
/*保证金：自动；
行*/
/*最后，在每一个窗口旁边添加一些空间*/
边界间距：10px 0；
左侧填充：10px；
}
#结果选择李{
高度：60px；/*此处或ul上*/
显示：表格单元格；
;
}
#结果选择李a{
显示：块；
padding top:25px；/*尝试删除此选项，并改用li上的垂直对齐：bottom*/
颜色：#777；
字体大小：小；
}

首先要看的是在

li

周围使用

div。您可以直接将id添加到
li
中，如下所示：
。此外，为了使列表项适合空间而不是换行，您需要对其进行百分比宽度设置。当宽度太小而无法包含所有列表项时，您希望发生什么情况？…如前所述，
div
不能是
ul
的子项…只允许
li
。注意，当我重新阅读你的问题时，我已经删除了我的答案，我不确定你到底想要实现什么？我知道列表中的div可能是错误的，啊哈。我正试图这样做，如果浏览器调整了列表项的大小，列表项将保持在原来的位置。所以它们不会被包裹或挤压，它们只是保持在一个固定的位置。非常感谢！这正是我想要的
<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>

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

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