Question

我找不到解决方案，虽然我确信它很简单！

我创建了一个水平菜单，使用无序列表和一系列图像，即'home'，'about'等。每个图像的宽度不同，但高度相同，为25px。

当我调整浏览器大小时，我希望菜单的宽度和高度都缩小。

目前的代码如下：

<style>

#container ul.content_list {
}
#container ul.content_list li {
    float: left;
    list-style: none;
    width: 100%;
}
#container ul.content_list li .image{
    float: left; 
    width: 100%;
    max-height: 25px;
}
#container ul.content_list li .image img {
    float: left;
    display: inline-block;
    width: 15%; /* comment this out to make the images the correct width and height */
    max-height: 25px;
}

</style>

<div id="container">
    <ul class="content_list">
        <li>
            <div class="image">
                <img src="homeOff.png" />
                <img src="aboutOff.png" />
                <img src="servicesOff.png" />
                <img src="portfolioOff.png" />
                <img src="contactOff.png" />
                <img src="blogOff.png" />
            </div>
        </li>
    </ul>
</div>

我把小提琴放在一起来证明这个问题：

http://jsfiddle.net/CAM79/JQuuj/

目前菜单的宽度和高度都在缩小，但图像的高度是错误的。

评论'宽度：15％'（在代码中突出显示）将正确显示图像，但然后它们会换行而不是收缩。

任何帮助将不胜感激，非常感谢提前！

Answer 1

如果你想让你的设计做出响应，你必须认为它会在用户调整大小时对屏幕的宽度做出反应。然后，使所有图像具有相同的宽度会更容易。根据你的设计，这是可能的但我不建议在菜单中使用图片！如果你看一下css渐变，你可以实现你现在所拥有的相同设计而不使用任何图片（这对SEO来说要好得多）。最后，检查如何正确使用ul和li标签，您还可以删除所有类，只使用标签名称来定位，这将使您的代码更轻松。你应该以这样的结局结束：

<div id="container">
<ul>
    <li><a>Home/</a></li>
    <li><a>About/</a></li>
    <li><a>Services/</a></li>
    <li><a>portoflio/</a></li>
    <li><a>contact/</a></li>
    <li><a>blog/</a></li>
</ul>

你的css可以举例如下：

#container ul li{
float: left;
width:15%;
background:black;
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

}

#container ul li a{
color:yellow;
text-align:center;
font-weight:bold;
}

CSS水平菜单，以正确的宽高比调整图像大小

1 个答案: