为什么这个CSS nowrap不起作用？

Question

为什么这个CSS nowrap不起作用？

我试图保持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; }

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Fel*_*Als 17

如果将元素显示为......,则可以同时拥有元素block和inline属性inline-block.

以下是您的代码已更正并正常工作:

span.bold是labels
a 通过/ attributes label与其form元素相关联forid
bar_top_block是id两次使用.应该是class
无需float: left;为display: inline-block;使用
因此也不需要清算元素
的.bar_top_block元素,因此任何还内置显示空白它们之间显示为空白.为了避免这种情况,我添加了一个注释,避免任何空格,尽管仍然让HTML代码可读.其中的文字是" 没有空格 ",所以开发人员会知道这个评论是有原因的,不应该被删除:)
你可以删除width的body,它只是这里的例子
你可以overflow在容器上玩这个属性
由于IE7及以下版本不理解inline-block像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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，8 月前
查看次数：	36108 次
最近记录：	13 年，2 月前