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

【问题标题】：How to make <div> inline? All <div>, even when their total width more than width of their parent?如何使 <div> 内联？所有 <div>，即使它们的总宽度超过其父级的宽度？
【发布时间】：2011-01-23 21:20:58
【问题描述】：

我需要让<div> 内联显示，并为其父级使用“溢出：隐藏”隐藏它们。

<div> 的宽度通过“box-sizing”属性设置为 20%，因此它们正好是其父宽度的 20%。

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

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

我的文档结构如下：

<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>

你可以明白我的意思here。但是我已经使用 javascript (设置为 <div> "position: absolute" 并为每个元素生成 "margin-left") 实现了它，它给未来的开发带来了很大的问题。

【问题讨论】：

你试过display:inline和clear:none吗？
当然可以，但是我需要元素的固定宽度（20%），内联元素的宽度取决于它们的内容。

标签： css html inline

【解决方案1】：

演示： 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 动画来说明效果：

演示： http://jsfiddle.net/marcuswhybrow/7YDfE/3/

【讨论】：

请记住，display: inline-block 在 IE 6 中不支持 non 'naturally inline' elements，在 IE 7 中也不完全支持。
在我的测试中，display: inline 没有提供对 div 的预期效果：jsfiddle.net/marcuswhybrow/emBjM/1
谢谢！ inline-block 和 nowrap 效果很好，但是如何删除元素之间出现的空格？我发现的唯一方法是将代码写入一行：jsfiddle.net/2QZeB/1
这是标记中空白的一个因素，解决方案是删除元素之间的任何空白：jsfiddle.net/marcuswhybrow/7YDfE/5
我知道这很旧：我根据您在下面的空白问题添加了一个答案。代码在 cmets 中显示不好。

【解决方案2】：

如果div 元素是display: inline，则将white-space: nowrap; 应用于父元素将防止它们换行。

【讨论】：

【解决方案3】：

由于您有已知数量的 div，您是否尝试过使用绝对定位而不是浮点数，并指定 left:20% left:40% 等？

【讨论】：

是的，我的问题结束了））我不知道
的数量，它们是由服务器使用数据库生成的。

【解决方案4】：

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

【讨论】：

【解决方案5】：

这将完成您想要的操作，除了删除中间的空格，同时允许漂亮的代码格式。容器获取字体大小：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;
}

【讨论】：