Question

我在水平行中有一组8个按钮。我如何使它们像www.dotacinema.com中的按钮一样，当你缩小窗口按钮时，按钮也在一起（或放大，按钮仍然可见）

由于

编辑：

    height: 38px;
float: left;
min-width: 60px;
max-width: 140px;
display: inline-block;
width: 12.5%;
background-image: url(button.jpg);
background-size: 100%;
color: white;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #d0d0d0;
border: outset #555 1.5px;
cursor: pointer;
text-align: center;
font-size: 16px;

由于某种原因，

不会使按钮挤压在一起。请帮助。

Answer 1

使按钮的宽度占页面的百分比，然后使用min-width: ;设置最小按钮宽度，以阻止它们变得小于可读。

http://jsfiddle.net/s2VvX/3/

Answer 2

他们在您提供的网站上所做的是使用CSS将ul更改为表格，其中每个li都是一个表格单元格，可以自动调整{{1}的宽度填写li。

您可以使用Chrome Developer Tools了解更多信息。

请注意，也可以使用ul，这可以在此处演示：http://jsfiddle.net/2kRJv/

如果浏览器窗口缩小，则使一组按钮“压入”

2 个答案: