(目标浏览器为IE8)
我有一个 div，其中包含向左浮动的元素列表。元素宽度可以在运行时改变。我想这样做，以便如果它们不再适合 div，它就会被切断并且不会换行。
似乎只有当该元素本身位于一行时才有效:
此页面演示了该问题: (文本输入的宽度需要在运行时更改)
<!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" class="aclb">
<ul>
<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>
最佳答案
您可以通过在 float 元素周围添加另一个 block 元素来轻松做到这一点，并将高宽度和溢出设置为隐藏。此外，您还需要将 Overflow:hidden 设置为原始父容器。
请注意，如果 float 元素的宽度超过了上面提到的新 block 元素的宽度，它们将再次换行。所以我建议给它一个高值。
编辑:我看到你有一个 div，里面有一个 ul 和一些 li。因此您不必添加新元素，因为 ul 也是一个 block 元素并且它已经存在。
这是您的代码，经过一些更正:
<!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>
我希望它对你有用。 :)
关于html - 你能让div中的 float 元素不换行吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2561684/