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

发布时间：2020-12-14 18:52:52 所属栏目：资源来源：网络整理

导读：我试图保持bar_top_container div包装它的内容,无论页面有多宽(即两个选择应该始终显示在同一行),但是当页面宽度较小时,它们都适合在一行,我该如何解决这个问题？样式： #bar_top_container { position: relative; white-space: nowrap; }#bar_top_block {

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!