css - 自动调整宽度以适合儿童并离开页面

Question

我有一个烦人的问题一直困扰着我一段时间。差不多，我有一个 div，其中包含一个 ul，然后包含一系列 li。这是一些来源：

<div>
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Some text here</li>
    </ul>
</div>

我已经设置好，以便不同的元素在屏幕上平铺，就像在这张图片中一样。
除了底部没有滚动条。我想要做的是添加一个滚动条，以便您可以滚动浏览。我不知道我会有多少元素，但是，我确实知道每个框的大小以及它们之间的间距。如果您仍然不明白我要做什么，请在此处查看项目。我想要做的部分是顶部的元素行。我希望他们有一个水平滚动条。

Answer 1

我查看了您引用的网站。<li>元素在 中，这display: inline-block是行不通的。试试这个：将您当前的 CSS 替换为ul li：

ul li {
    list-style: none;
    display: table-cell;
    border: 10px solid transparent;
    border-top: none;
    border-bottom: none;
}

这使得所有列表元素仅在一行中对齐，而不是溢出到多行中。

另外，请尝试包含更多代码，或将其添加到JSFiddle中。

Answer 2

您可以为您指定一个宽度div并将overflow:autocss 属性应用于它。如果元素宽度高于 div 的宽度，它将使滚动条可见。

<style>
.my_div {
   width:600px;
   overflow-x:auto;
}
</style>

<div class='my_div'>
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Some text here</li>
    </ul>
</div>

Answer 3

<div style="overflow-x: auto; width:100%;">
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Some text here</li>
    </ul>
</div>

和李的

   li {
      float: left:
      // or
      display: inline;
    }

Answer 4

CSS：

#header-container
{
    width:100%; /* or set it to whatever you want */
    overflow-x: auto;
}

HTML：

<div id="header-container">
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Some text here</li>
    </ul>
</div>

完毕！