我有一个导航栏，其中该网站的 8 个主要链接位于 100px 宽的标签中。
这在宽屏幕上很好。它们显示为一个制服条。
当在移动设备上查看页面时，我希望我的移动CSS使它们堆叠，以便在490px的屏幕上，会有两行四个"bottons"。如果可能的话，我想在为 s 使用单个类时执行此操作。
一点帮助？
在你的 CSS 文件中：
@media screen and (max-width: 900px) {
...
}
有关使用媒体查询的更多说明：http://webdesignerwall.com/tutorials/css3-media-queries
我认为让它工作的一种方法是编写这样的代码：
<html>
<body>
<div style="height:auto;width:100%">
<div style="float:left;width:100px;"><a href="#">test me 1</a></div>
<div style="float:left;width:100px;"><a href="#">test me 2</a></div>
<div style="float:left;width:100px;"><a href="#">test me 3</a></div>
<div style="float:left;width:100px;"><a href="#">test me 4</a></div>
<div style="float:left;width:100px;"><a href="#">testtoo</a></div>
<div style="float:left;width:100px;"><a href="#">test me 6</a></div>
<div style="float:left;width:100px;"><a href="#">test me 7</a></div>
<div style="float:left;width:100px;"><a href="#">test me 8</a></div>
</div>
</body>
</html>
您可以尝试调整屏幕大小，并根据需要堆叠。
这里的一个关键是使用内部div 的 float：left，这将使它们保持在同一水平。
条形图的大小将是屏幕的宽度，因此您可以使用该百分比和其他值来获得所需的输出。
**固定在设置大小的位置。必须位于 中，而不是
您可以使用CSS类来完成所有这些操作，这可能要容易得多