我试图保持bar_top_container div包装它的内容,无论页面有多宽(即两个选择应该始终显示在同一行),但是当页面宽度较小时,它们都适合在一行,我该如何解决这个问题？
样式：
#bar_top_container { position: relative; white-space: nowrap; }
#bar_top_block { float: left; padding-left: 10px; padding-right: 10px; border-right: 1px solid #4965BB; }
#clear { clear: both; }
HTML：
<div id="bar_top_container"> <div id="bar_top_block"> <span class="bold">select1: </span> <select><option value="asdf">asdf</option></select> </div> <div id="bar_top_block"> <span class="bold">asdf: </span> <select><option value="blah">-- select action --</option></select> </div> <div id="clear"></div> </div>
解决方法
如果将其显示为… inline-block,则可以为元素同时拥有块和内联属性.
这是您的代码更正和工作：
> span.bold是标签
>标签通过for / id属性与其表单元素相关联
> bar_top_block是一个使用两次的ID.应该是上课
>不需要float：left; as display：inline-block;用来
>因此也不需要清算要素
> .bar_top_block元素也显示为内联,所以它们之间的任何空格都将显示为空格.为了避免这种情况,我添加了一个注释,以避免任何空格,尽管仍然允许HTML代码可读.内部的文字是’没有空白’,所以开发者会知道这个评论是有原因的,不应该被剥夺:)
>你可以去掉身体的宽度,这里就是这个例子
>你可以玩容器上的overflow属性
>因为IE7及以下版本不了解div中的块元素的内嵌块值,所以必须使用display：inline并赋予元素hasLayout,例如zoom：1;
>针对IE7及更低版本的最佳方法,只有那些浏览器才具有条件注释
>我添加了对Fx2的支持,但这只是为了历史原因:)
.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<Meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Stack Overflow 3150509 - Felipe</title>
<style type="text/css">
body {
width: 300px;
}
#bar_top_container {
overflow: auto;
white-space: nowrap;
border: 1px solid red;
}
.bar_top_block {
display: -moz-inline-stack; /* Fx2,if you've to support this ooold browser. You should verify that you can still click in the elements,there is a known bug with Fx2 */
display: inline-block;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #4965BB;
}
</style>
<!--[if lte IE 7]><style type="text/css">
.bar_top_block {
display: inline;
zoom: 1;
}
</style> <![endif]-->
</head>
<body>
<form method="post" action="#" id="bar_top_container">
<div class="bar_top_block">
<label for="select1">ObvIoUsly I am a label: </label>
<select id="select1"><option value="asdf">asdf</option></select>
</div><!-- no whitespace
--><div class="bar_top_block">
<label for="select2">I'm a label too and I need a for attribute: </label>
<select id="select2"><option value="blah">-- select action --</option></select>
</div>
</form>
</body>
</html>
