Html 为什么这个 CSS nowrap 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3150509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is this CSS nowrap not working?
提问by user318747
I'm trying to keep the bar_top_container div from wrapping it's contents no matter how wide the page is (i.e. both selects should appear always on the same line), this is not working however when the page width is to small for them to both fit on one line, how can i fix this?
无论页面有多宽，我都试图让 bar_top_container div 不包装它的内容（即两个选择应始终出现在同一行上），但是当页面宽度太小以至于它们都适合时，这不起作用一方面，我该如何解决这个问题？
Styles:
款式：
#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:
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>
回答by FelipeAls
You can have both blockand inlineproperties for an element if you display it as ... inline-block!
如果将元素显示为 ... ，则可以同时拥有block和inline属性inline-block。
Here is your code corrected and working:
这是您的代码已更正并正常工作：
span.bold are
labelsa
labelis associated to itsformelement via thefor/idattributesbar_top_blockis anidused twice. Should be aclassno need for
float: left;asdisplay: inline-block;is usedthus no need for a clearing element either
the
.bar_top_blockelements are also displayed inline so any whitespacebetween them is displayed as whitespace. To avoid this, I added a comment that avoid any whitespace though still letting the HTML code readable. The text within is 'no whitespace' so the developer will know that this comment is there for a reason and shouldn't be stripped :)you can remove the
widthonbody, it's just here for the exampleyou can play with the
overflowproperty on the containeras IE7 and below don't understand the
inline-blockvalue on block elements like div, you must usedisplay: inlineand give the element the hasLayoutwith, for example,zoom: 1;the best way to target IE7 and below and only those browsers is with a conditional comment
I added support for Fx2 but this is merely for historical reasons :)
span.bold 是
labelsa通过/属性
label与其form元素相关联foridbar_top_block是id使用了两次。应该是一个class无需
float: left;为display: inline-block;使用因此也不需要清算元素
的
.bar_top_block元素，因此任何还内置显示空白它们之间显示为空白。为了避免这种情况，我添加了一条注释，避免出现任何空格，但仍然让 HTML 代码可读。里面的文字是“没有空格”，所以开发者会知道这个评论是有原因的，不应该被删除:)你可以删除
widthonbody，它只是这里的例子您可以使用
overflow容器上的属性由于 IE7 及以下版本不了解
inline-blockdiv 等块元素的值，因此您必须使用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>
回答by jantimon
Floating elements wrap as white-space: nowrapdoes not work for block elements but only for inline elements and text.
浮动元素 wrap aswhite-space: nowrap不适用于块元素，但仅适用于内联元素和文本。
回答by Slavik Meltser
I'm suggesting to use a valid form usage:
我建议使用有效的表单用法：
<form>
<label>select1: <select><option value="asdf">asdf</option></select></label>
<label>asdf: <select><option value="blah">-- select action --</option></select></label>
</form>
Hope it helps.
希望能帮助到你。
