3

我有以下 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-buttons 是从数据库加载的，元素的数量取决于数据库记录的数量。当元素超过一定限度时，多余的元素就会失序。我怎样才能阻止这个？我经历了一种方法，使其他元素位置绝对，然后所需的元素可以充当框架。但就我而言，这是不可能的。

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

更新：

按钮更少

有更多按钮

如您所见，第一张图像显示正确，但第二张图像显示按钮越多，其他元素就会乱序。我怎样才能解决这个问题。我希望按钮粘在一行而不是转到第二行。

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

4

2 回答 2

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
}

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

谢谢你们的努力！

于 2013-04-18T05:38:56.140 回答
0

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

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

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

  2. Create your own scrolling. If you are comfortable with a little JavaScript, you can use overflow-x: hidden; and position: relative; on the container, then have a "slider" inside of it that holds the buttons, and has position: absolute;. Then, on either end of the container would be hover-buttons, that would trigger JS to adjust the position of the slider, thus scrolling. This will only work if JS is enabled, though you can simply fall back to the overflow-x: scroll; method in such a case. The advantage here is that everything looks nice and uniform.

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

于 2013-04-18T07:04:53.190 回答