Can you make floated elements in a div not wrap?
(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;}
开发者_Python百科 </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. :)
overflow:hidden on the parent container should do the trick.
Could you use "nowrap"? probably just for text mind you
It seems like you're looking for this sort of behaviour, no?
div.aclb {
overflow: hidden;
}
div.aclb ul {
white-space: nowrap;
}
div.aclb li {
display: inline;
}
加载中,请稍侯......
精彩评论