Question

我需要将<div>显示为内联，并为其父级隐藏“overflow：hidden”。

使用“box-sizing”属性将<div>的宽度设置为20％，因此它们恰好是其父宽度的20％。

通常的方法，使用“float：left”没有帮助，因为它只在一行显示5 <div>，其余的显示在前5 {{1}下的新行中}。

如果所有<div>显示内联并隐藏其余部分，如果它们太宽而无法在其父级内显示，请使用“overflow：hidden”？

我有以下文档结构：

<div>

你可以看到我的意思here。但是我已经使用javascript（为<body> <div class="column"> <div class="header">Some text</div> <ul class="item_list"> <li class="simple"><a href="">Some text<br></a></li> <li class="simple"><a href="">Some text<br></a></li> <li class="simple"><a href="">Some text<br></a></li> ... </ul> </div>设置“position：absolute”并为每个elemet生成了“margin-left”）并且它为未来的开发带来了很大的问题。

Answer 1

DEMO： http://jsfiddle.net/marcuswhybrow/7YDfE/3/

组合使用display: inline-block和white-space: nowrap：

<div class="wrapper">
    <div class="inline"></div>
    <div class="inline"></div>
    <div class="inline"></div>
</div>

然后使用适当的CSS：

div.wrapper {
    width: 200px; /* or whatever */
    overflow: hidden;
    white-space: nowrap;
}

div.inline {
    display: inline-block;
}

该演示包含一些jQuery动画来说明效果：

DEMO： http://jsfiddle.net/marcuswhybrow/7YDfE/3/

Answer 2

如果div元素为display: inline，则将white-space: nowrap;应用于父元素将阻止其换行到新行。

Answer 3

由于你有一个已知数量的div，你是否尝试过使用绝对定位而不是浮点数，并指定左：20％左：40％等？

Answer 4

如果将容器div的高度设置为固定值，并给出所有内部元素display: inline-block，这应该可以解决问题。 inline-block将使每个元素对齐左边，但保持它的尺寸，而固定高度容器将隐藏任何溢出到新线的元素。

Answer 5

除了允许更好的代码格式化之外，还可以删除之间的空白区域，从而实现您想要的功能。容器获取font-size：0px ftw。

标记

<div class="wrapper">
    <div class="inline">Some text </div>
    <div class="inline">Some sample text </div>
    <div class="inline">Some Other text </div>
</div>

CSS

div.wrapper {
    width: 250px; /* or whatever */
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid red;
    font-size:0px;
}

div.inline {
    display: inline-block;
    width: 80px;
    height: 20px;
    background-color: black;
    color:white;
    margin: 0; padding: 0;
    border: 1px solid blue;
    font-size:12px;
}

如何使<div>内联？所有<div>，即使它们的总宽度超过其父级的宽度？</div> </div>

5 个答案: