Html 可以使div中的浮动元素不换行吗？_Html_Css

Html 可以使div中的浮动元素不换行吗？

html css

Html 可以使div中的浮动元素不换行吗？,html,css,Html,Css,（目标浏览器是IE8）我有一个div，其中包含向左浮动的元素列表。元素宽度可以在运行时更改。我想这样做，如果他们不再适合在div它只是被切断，而不是包装到一个新的线只有当项目本身在一行上时，它似乎才起作用：本页演示了问题：（文本输入的宽度需要在运行时更改） div.aclb{背景：#EEF3FA；颜色：#666；光标：文本；填充：1px；溢出-y：自动；边框：#BBC8D9 1px实心；} div.aclb:hover{border:3399ff1px solid；} div.aclb

（目标浏览器是IE8）

我有一个div，其中包含向左浮动的元素列表。元素宽度可以在运行时更改。我想这样做，如果他们不再适合在div它只是被切断，而不是包装到一个新的线

只有当项目本身在一行上时，它似乎才起作用：

本页演示了问题：（文本输入的宽度需要在运行时更改）


div.aclb{背景：#EEF3FA；颜色：#666；光标：文本；填充：1px；溢出-y：自动；边框：#BBC8D9 1px实心；}
div.aclb:hover{border:3399ff1px solid；}
div.aclb.focus{背景：#FFF；边框：#3399FF 1px solid；}
div.aclb ul{填充：0；边距：0；列表样式：无；显示：表格；垂直对齐：中间；}
div.aclb li{float:left；cursor:default；font-family:Arial；padding:0；margin:0；height:18px；}/*在此处设置高度很重要。似乎li在某些浏览器上的高度可以大于18px*/
div.aclb li.block{填充：0px 2px；高度：16px；空白：nowrap；边框：实心1px#BBD8FB；背景：#f3f7fd；字体大小：11px；行高：16px；}
div.aclb li.block:悬停{边框：实心1px#5F8BD3；背景：#E4ECF8；颜色：#000；}
div.aclb输入{边距：0；填充：0；高度：18px；背景：透明；边框：无；颜色：#666；溢出：隐藏；大小：无；字体系列：Arial；字体大小：13px；轮廓：无}
div.aclb输入：焦点{边距：0；填充：0；高度：18px；背景：透明；边框：无；颜色：#22F；溢出：隐藏；大小：无；字体系列：Arial；字体大小：13px；轮廓：无；}
div.aclb a.d{光标：指针；显示：块；颜色：#6b；宽度：13px；高度：12px；浮动：右；边距：1px 0 1px 4px；边框：实心1px透明；字体系列：Verdana；字体大小：11px；文本对齐：中心；线条高度：10px；}
div.aclb a.d:悬停{边框：实心1px#7DA2CE；背景：#F7FAFD；颜色：#AD0B0B；}
div.aclb a.d:活动{边框：实心1px#497CBB；背景：#BAD8E8；颜色：#A90909；}


xItem 1

溢出：隐藏在父容器上就可以了。

您可以使用“nowrap”吗？可能只是为了文本提醒你

你可以通过在浮动的块周围添加另一个块元素，将高宽度和溢出设置为hidden来轻松实现。此外，还需要将overflow:hidden设置为原始父容器

请注意，如果浮动元素的宽度超过上述新块元素的宽度，它们将再次换行。所以我推荐一个高值

编辑：我看到你有一个带ul的div，里面有一些li。因此，您不必添加新元素，因为ul也是一个块元素，并且已经存在

以下是您的代码和一些更正：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <style type="text/css">
        div.aclb {background:#EEF3FA; color:#666; cursor:text; padding:1px; overflow-y:auto; border:#BBC8D9 1px solid; }
        div.aclb:hover {border:#3399FF 1px solid;}
        div.aclb.focus {background:#FFF; border:#3399FF 1px solid;}
        div.aclb ul {padding:0; margin:0; list-style:none; display:table; vertical-align:middle; }
        div.aclb li {float:left; cursor:default; font-family:Arial; padding:0; margin:0; height:18px;} /*Setting Height here is important. Seems li can have a height>18px on some browsers*/
        div.aclb li.block {padding:0px 2px; height:16px; white-space:nowrap; border:solid 1px #BBD8FB; background:#f3f7fd; font-size:11px; line-height:16px;}
        div.aclb li.block:hover {border:solid 1px #5F8BD3; background:#E4ECF8; color:#000;}

        div.aclb input {margin:0; padding:0; height:18px; background:transparent; border:none; color:#666; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none}
        div.aclb input:focus {margin:0; padding:0; height:18px; background:transparent; border:none; color:#22F; overflow:hidden; resize:none; font-family:Arial; font-size:13px; outline:none;}

        div.aclb a.d {cursor:pointer; display:block; color:#6B6B6B; width:13px; height:12px;float:right; margin:1px 0 1px 4px; border:solid 1px transparent; font-family:Verdana; font-size:11px; text-align:center;  line-height:10px;}
        div.aclb a.d:hover { border:solid 1px #7DA2CE; background:#F7FAFD; color:#AD0B0B;}
        div.aclb a.d:active {border:solid 1px #497CBB; background:#BAD8E8; color:#A90909;}
    </style>
</head>
<body>

<div style="width:250px; overflow: hidden;" class="aclb">
    <ul style="width: 1000px; overflow: hidden;">
        <li class="block">
            <a class="d">x</a><span>Item 1</span>
        </li>
        <li class="input">
            <input type="text" style="width:300px" maxlength="30"/>
        </li>
    </ul>
</div>

</body>

</html>


div.aclb{背景：#EEF3FA；颜色：#666；光标：文本；填充：1px；溢出-y：自动；边框：#BBC8D9 1px实心；}
div.aclb:hover{border:3399ff1px solid；}
div.aclb.focus{背景：#FFF；边框：#3399FF 1px solid；}
div.aclb ul{填充：0；边距：0；列表样式：无；显示：表格；垂直对齐：中间；}
div.aclb li{float:left；cursor:default；font-family:Arial；padding:0；margin:0；height:18px；}/*在此处设置高度很重要。似乎li在某些浏览器上的高度可以大于18px*/
div.aclb li.block{填充：0px 2px；高度：16px；空白：nowrap；边框：实心1px#BBD8FB；背景：#f3f7fd；字体大小：11px；行高：16px；}
div.aclb li.block:悬停{边框：实心1px#5F8BD3；背景：#E4ECF8；颜色：#000；}
div.aclb输入{边距：0；填充：0；高度：18px；背景：透明；边框：无；颜色：#666；溢出：隐藏；大小：无；字体系列：Arial；字体大小：13px；轮廓：无}
div.aclb输入：焦点{边距：0；填充：0；高度：18px；背景：透明；边框：无；颜色：#22F；溢出：隐藏；大小：无；字体系列：Arial；字体大小：13px；轮廓：无；}
div.aclb a.d{光标：指针；显示：块；颜色：#6b；宽度：13px；高度：12px；浮动：右；边距：1px 0 1px 4px；边框：实心1px透明；字体系列：Verdana；字体大小：11px；文本对齐：中心；线条高度：10px；}
div.aclb a.d:悬停{边框：实心1px#7DA2CE；背景：#F7FAFD；颜色：#AD0B0B；}
div.aclb a.d:活动{边框：实心1px#497CBB；背景：#BAD8E8；颜色：#A90909；}
宽度：1000px；溢出：隐藏；“>

xItem 1

我希望它对你有用。：）

你似乎在寻找这种行为，不是吗

div.aclb {
    overflow: hidden;
}
div.aclb ul {
    white-space: nowrap;
}
div.aclb li {
    display: inline;
}

真正地有趣的是CSS有时是如何工作的。。。我从来没有想过这一点。覆盖：隐藏是不够的，您需要将其宽度设置为更高的值，以允许溢出。如果在父容器中这样做，它肯定不适合其原始上下文。见我的帖子。我更新了一个更具体的例子。这似乎对我不起作用。文本输入太宽时会转到下一行。当您说输入的宽度需要更改时，是否希望更改maxlength值或style width值（或两者）？是否还要更改封闭div样式的宽度值？封闭div是封闭在一组元素上，还是封闭在多行上？

div.aclb {
    overflow: hidden;
}
div.aclb ul {
    white-space: nowrap;
}
div.aclb li {
    display: inline;
}