将嵌套的div / span强制到一行 [英] force nested divs/spans onto one line

问题描述

我的结构类似于这样的小提琴 http://jsfiddle.net/qqqh1agy/1/

I have a structure that is something like this fiddle http://jsfiddle.net/qqqh1agy/1/

HTML：

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

CSS：

.outer{
    width: 100px;
    height:20px;
    overflow: auto;
}
.inner{
    background:red;
    width:50px;
    float:left;
    height:20px
}

我希望将内部div放在一个与水平滚动条对齐。

I want the inner divs to be on one line with a horizontal scrollbar. Is this possible?

任何想法都会受到赞赏

C

推荐答案

将 white-space：nowrap; 添加到外部 div，然后将 float：left 替换为内部上的 display：inline-block divs

Add white-space:nowrap; to the outer div, then replace float:left with display:inline-block on the inner divs

这会强制内部元素显示在一行上，同时防止它们换行到下一行。

This forces the inner elements to display on a single line, whilst preventing them from wrapping to the next.

.outer {
    width: 100px;
    height:20px;
    overflow-x: scroll;
    white-space:nowrap; /* <-- force items to display on the same line */ 
}
.inner {
    background:red;
    width:50px;
    height:20px;
    display:inline-block; /* <-- display 'in a row' */ 
}

，要正确显示滚动条和内容，您可能需要将CSS更改为：

That said, to properly display your scrollbar and content, you may want to change your CSS to:

.outer {
    width: 100px;
    overflow-x: auto; /* <-- show horizontal scrollbar */
    overflow-y:hidden; /* <-- hide vertical scrollbar */
    white-space:nowrap;
}
.inner {
    background:red;
    width:50px;
    height:20px;
    display:inline-block;
}

这篇关于将嵌套的div / span强制到一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！