Question

对于网页设计而言，无法正确解释，但请查看我创建的页面。 http://workspa.webs.com/new/web.html#

请注意横幅图像在放大和缩小时如何保持100％宽度并且似乎不会增加尺寸？我希望水平菜单也这样做，但不知道如何。现在它随着我的放大而增大和减小（类似于第二张照片在我网站上的表现）。我通过使用以下方式使横幅表现得像： HTML：

<div class="container"><img src="head.jpg" /></div><br/>

CSS：

.container {width: 100%; overflow: hidden; }

.container img {width：100％;}

但我不知道这对水平菜单有什么用处。我应该注意到我在左侧创建了一个小菜单，并且我放置了一个相同颜色的div以适应100％的宽度，因为我不知道如果我将菜单设置为100％，如何使标签保持在左侧宽度本身。

这就是我对菜单的看法： HTML：

<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Videos</a></li>
</ul>
</div>

CSS：

* {margin: 0; padding: 0;}
ul { display: table; width: 100%;}
ul li { list-style-type: none; position: relative; float: left;}
ul li a { background: #444444; color: white; display: block;
font-family: Arial, Helvetica, sans-serif;           padding: 10px 20px; text-decoration: none; }
ul li a:hover { background: red; }

#menu { width: 100%; height: auto; background-color: #444444; }

你能帮忙，我希望我的解释不会太混乱。

Answer 1

也许这对你如何尝试做到有点帮助：

http://jsfiddle.net/w7fLT/

将此添加到您的css

#menu {
    width:353px;
    margin:0 auto;
}

@media only screen and (max-width : 400px) {
    ul li { 
        display:block;
        float:none;
    }
}

有趣的编码

如何在CSS中调整水平菜单的大小？

1 个答案: