我试图保持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>
答案 0 :(得分:17)
如果您将某个元素显示为block
,则可以同时拥有inline
和inline-block
属性!
以下是您的代码已更正并正常工作:
span.bold是label
s
label
通过form
/ for
属性
id
元素相关联
bar_top_block
使用了两次id
。应该是class
不需要float: left;
使用display: inline-block;
因此无需清算元素
.bar_top_block
元素也以内联方式显示,因此它们之间的任何空格都显示为空格。为了避免这种情况,我添加了一个注释,避免任何空格,尽管仍然让HTML代码可读。其中的文本是' no whitespace ',因此开发人员会知道此评论是有原因的,不应该被删除:)
您可以删除width
上的body
,这只是示例
您可以使用容器上的overflow
属性
因为IE7及以下版本不理解像div这样的块元素的inline-block
值,所以必须使用 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>
答案 1 :(得分:3)
浮动元素换行white-space: nowrap
不适用于块元素,但仅适用于内联元素和文本。
答案 2 :(得分:-1)
我建议使用有效的表单用法:
<form>
<label>select1: <select><option value="asdf">asdf</option></select></label>
<label>asdf: <select><option value="blah">-- select action --</option></select></label>
</form>
希望它有所帮助。