Question

我有一个导航栏，其中该站点的8个主要链接是100px宽的标签。

这在宽屏幕上很好。它们看起来像一个统一的酒吧。

当在移动设备上查看页面时，我希望我的移动CSS能够将它们堆叠起来，这样在490px的屏幕上，就会有两行四个“底部”。如果可能的话，我想在为s使用单个类时这样做。

一点帮助？

Answer 1

在CSS文件中：

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

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

Answer 2

我认为实现这一目标的一种方法是编写类似的代码：

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

为导航栏包裹Div布局

2 个答案: