为什么此CSS nowrap无法正常工作? [英] Why is this CSS nowrap not working?
问题描述
无论页面有多宽，我都试图使bar_top_container div不包装其内容(即，两个选择都应始终显示在同一行上)，但这不起作用，但是当页面宽度对他们来说很小时都适合在一条线上，我该如何解决?
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 { 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，则可以同时具有元素的block和inline属性！
You can have both block and inline properties for an element if you display it as ... inline-block!
这是您的代码已更正并且可以正常工作:
Here is your code corrected and working:
-
span.bold是
labels
a label通过for/id属性与其form元素相关联
a label is associated to its form element via the for/id attributes
bar_top_block是两次使用的id.应该是class
bar_top_block is an id used twice. Should be a class
不需要float: left;，因为使用了display: inline-block;
因此也不需要清除元素
.bar_top_block元素也以内联方式显示，因此它们之间的任何空白都显示为空白.为避免这种情况，我添加了一条注释，该注释避免了任何空格，但仍使HTML代码可读.其中的文本为"没有空格"，因此开发人员将知道此注释存在是有原因的，不应将其删除:)
the .bar_top_block elements are also displayed inline so any whitespace between 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 :)
您可以删除body上的width，此处仅是示例
you can remove the width on body, it's just here for the example
您可以在容器上使用overflow属性
you can play with the overflow property on the container
由于IE7及以下版本不了解div等块元素上的inline-block值，因此必须使用 display: inline 并将元素赋予 hasLayout ，例如，zoom: 1;
as IE7 and below don't understand the inline-block value on block elements like div, you must use display: inline and give the element the hasLayout with, for example, zoom: 1;
仅针对那些浏览器定位IE7及更低版本的最佳方法是使用条件注释
the best way to target IE7 and below and only those browsers is with a conditional comment
我添加了对Fx2的支持，但这仅仅是出于历史原因:)
I added support for Fx2 but this is merely for historical reasons :)
.
<!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>
这篇关于为什么此CSS nowrap无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
