你可以让 div 中的浮动元素不换行吗? - IT屋-程序员软件开发技术分享社区
你可以让 div 中的浮动元素不换行吗?
[英] Can you make floated elements in a div not wrap?
本文介绍了你可以让 div 中的浮动元素不换行吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
(目标浏览器为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" ><头><title></title><style type="text/css">div.aclb {背景:#EEF3FA；颜色:#666；光标:文本；填充:1px；溢出-y:自动；边框:#BBC8D9 1px 实心；}div.aclb:hover {border:#3399FF 1px solid;}div.aclb.focus {背景:#FFF；边框:#3399FF 1px 实心；}div.aclb ul {padding:0;保证金:0;列表样式:无；显示:表；垂直对齐:中间；}div.aclb li {浮动:左；光标:默认；字体系列:Arial;填充:0;保证金:0;height:18px;}/*这里设置高度很重要.似乎 li 在某些浏览器上可以有一个 height>18px*/div.aclb li.block {padding:0px 2px;高度:16px；空白:nowrap;边框:实心 1px #BBD8FB;背景:#f3f7fd;字体大小:11px；行高:16px;}div.aclb li.block:hover {border:solid 1px #5F8BD3;背景:#E4ECF8；颜色:#000;}div.aclb 输入 {margin:0;填充:0;高度:18px；背景:透明；边界:无；颜色:#666；溢出:隐藏；调整大小:无；字体系列:Arial;字体大小:13px；大纲:无}div.aclb 输入:焦点 {边距:0；填充:0;高度:18px；背景:透明；边界:无；颜色:#22F；溢出:隐藏；调整大小:无；字体系列:Arial;字体大小:13px；大纲:无；}div.aclb a.d {光标:指针；显示:块；颜色:#6B6B6B；宽度:13px；高度:12px；浮动:右；边距:1px 0 1px 4px;边框:实心1px透明；字体系列:Verdana;字体大小:11px；文字对齐:居中；行高:10px;}div.aclb a.d:hover { border:solid 1px #7DA2CE;背景:#F7FAFD；颜色:#AD0B0B;}div.aclb a.d:active {border:solid 1px #497CBB;背景:#BAD8E8；颜色:#A90909;}</风格><身体><div style="width:250px" class="aclb"><ul><li class="block"><a class="d">x</a><span>项目 1</span><input type="text" style="width:300px" maxlength="30"/>
</html>
解决方案
您可以通过在浮动元素周围添加另一个块元素来轻松完成此操作，并将高宽度和溢出设置为隐藏.此外，您需要将 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" ><头><title></title><style type="text/css">div.aclb {背景:#EEF3FA；颜色:#666；光标:文本；填充:1px；溢出-y:自动；边框:#BBC8D9 1px 实心；}div.aclb:hover {border:#3399FF 1px solid;}div.aclb.focus {背景:#FFF；边框:#3399FF 1px 实心；}div.aclb ul {padding:0;保证金:0;列表样式:无；显示:表；垂直对齐:中间；}div.aclb li {浮动:左；光标:默认；字体系列:Arial;填充:0;保证金:0;height:18px;}/*这里设置高度很重要.似乎 li 在某些浏览器上可以有一个 height>18px*/div.aclb li.block {padding:0px 2px;高度:16px；空白:nowrap;边框:实心 1px #BBD8FB;背景:#f3f7fd;字体大小:11px；行高:16px;}div.aclb li.block:hover {border:solid 1px #5F8BD3;背景:#E4ECF8；颜色:#000;}div.aclb 输入 {margin:0;填充:0;高度:18px；背景:透明；边界:无；颜色:#666；溢出:隐藏；调整大小:无；字体系列:Arial;字体大小:13px；大纲:无}div.aclb 输入:焦点 {边距:0；填充:0;高度:18px；背景:透明；边界:无；颜色:#22F；溢出:隐藏；调整大小:无；字体系列:Arial;字体大小:13px；大纲:无；}div.aclb a.d {光标:指针；显示:块；颜色:#6B6B6B；宽度:13px；高度:12px；浮动:右；边距:1px 0 1px 4px;边框:实心1px透明；字体系列:Verdana;字体大小:11px；文字对齐:居中；行高:10px;}div.aclb a.d:hover { border:solid 1px #7DA2CE;背景:#F7FAFD；颜色:#AD0B0B;}div.aclb a.d:active {border:solid 1px #497CBB;背景:#BAD8E8；颜色:#A90909;}</风格><身体><div style="width:250px; overflow: hidden;"class="aclb"><ul style="width: 1000px; overflow: hidden;"><li class="block"><a class="d">x</a><span>项目 1</span><input type="text" style="width:300px" maxlength="30"/> </html>
希望对你有用.:)
(The target browser is IE8)
I have a div that contains a list of elements floated left. The elements width can change at runtime. I'd like to make it so that if they longer fit in the div it just gets cut off and doesn't wrap to a new line.
It only seems to work if the item is on a line by itself:
This page demonstrates the problem:
(The text input's width needs to change at runtime)
<!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>
解决方案
You can do that easily by adding another block element around the floated ones, with high width and overflow set to hidden. Also, you'll need to set overflow:hidden to the original parent container.
Note that if the width of the floated elements exceed the width of the new block element mentioned above, they will wrap again. So I recommend a high value for that.
EDIT: I see you have a div with an ul and some li's inside. So you don't have to add a new element, since the ul is also a block element and it is already there.
Here is your code with some corrections:
<!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>
I hope it will work for you. :)
这篇关于你可以让 div 中的浮动元素不换行吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
