如果将其显示为… 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的支持,但这只是为了历史原因:)
.
Stack Overflow 3150509 - Felipebody {
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;
}