使div充当框架

Question

我有以下HTML组。

<div id="item-groups">
<!-- Section to select product types -->

<div class="item-group-button">
<!-- Item Group Selection Button -->
<h3>Beverage</h3>
</div>
<div class="item-group-button">
<!-- Item Group Selection Button -->
<h3>Tobacco</h3>
</div>
</div>

我为上面的元素设计了以下CSS ..

#item-groups{
height: 75px;

}

.item-group-button{
    width:130px;
    height:40px;
    float:left;
    margin:17px 0px 0px 20px;
    border-radius:10px;
    background:#4e5154;
}

.item-group-button h3{
    padding:0px;
    margin:8px 0px 0px 29px;
    color:white;
}

如何设计CSS以使item-groups div可以充当框架。为了解释一下，item-group-butons是从DB加载的，元素的数量取决于DB记录的数量。当元素超过一定限度时，多余的元素就会出现故障。我怎么能阻止这个？我经历了一种方法，使其他元素位于绝对位置，然后所需的元素可以作为一个框架。但在我的情况下，这是不可能的。

我尝试删除item-groups元素的宽度限制但没有用！

更新

正如您所看到的，第一张图像正确显示，但第二张图像显示有更多按钮，其他元素则不按顺序排列。我怎样才能解决这个问题。我希望按钮坚持一行而不是第二行。

使用html框架时，当有更多元素要显示时，会有一个滚动条！如何在Div中使用该功能。

Answer 1

这是一个简单的CSS技巧，可以使用以下代码完成。

表示父元素：

#item-groups{
height: 80px;
width: inherit;
overflow-x: scroll; <-- Make the scrolling horizontal
white-space: nowrap; <-- Handle the white space in the element 
}

表示子元素：

.item-group-button{
width: 130px;
height: 40px;
margin: 17px 0px 0px 20px;
border-radius: 10px;
background: #4e5154;
    display: inline-block; <-- this will display the excess elements in a line
}

从子元素中删除float是必要的。

谢谢你们的努力！

Answer 2

要获取滚动条，您可以在容器上使用overflow-x: scroll;，这允许其中的元素超出其边界，并在发生时创建滚动条。

我想指出，对于菜单而言，这可能不是最好的选择。滚动条不会与设计很好地融合。我看到两种选择：

1. 如果容器无法容纳它们，请重新调整尺寸按钮。基本上，您将定义max-width:属性，并给它们一个百分比width:，因此所有按钮看起来都会正常，直到出现溢出。显然这可能是标签问题。您可能需要在标签文本上执行overflow-x: hidden;以使其看起来正确。或者试试。 。

2. 创建自己的滚动。如果您对一点JavaScript感到满意，可以在容器上使用overflow-x: hidden;和position: relative;，然后在其中放置一个包含按钮的“滑块”，并且position: absolute;。然后，在容器的任何一端都会有悬停按钮，这会触发JS调整滑块的位置，从而滚动。这仅在启用JS时才有效，尽管在这种情况下您可以简单地回退到overflow-x: scroll;方法。这里的优点是一切看起来都很漂亮和均匀。

我通常试图偏离强制滚动条，因为每个操作系统/浏览器可以以非常不同的方式呈现它们。现在你可以样式滚动条，因为CSS3提供了许多伪元素来处理它们。不幸的是，浏览器支持是粗略的，并且需要特殊的浏览器特定代码，这意味着它确实不是一个非常好的选择。