0

我有一个导航栏，其中网站的 8 个主要链接位于 100 像素宽的标签中。

这在宽屏幕上很好。它们显示为一个统一的条。

当在移动设备上查看页面时，我希望我的移动 CSS 将它们堆叠起来，这样在 490 像素的屏幕上就会有两排四个“按钮”。如果可能的话，我想在为 s 使用单个类时执行此操作。

一点帮助？

4

2 回答 2

0

我认为让这个工作的一种方法是编写如下代码：

<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 类来完成所有这些操作，这可能更容易

于 2012-08-19T18:18:22.453 回答
0

在您的 CSS 文件中：

@media screen and (max-width: 900px) {
  ...
}

有关使用媒体查询的更多说明：http ://webdesignerwall.com/tutorials/css3-media-queries

于 2012-08-19T18:01:27.410 回答