2

我找不到解决方案，尽管我确信这很简单！

我使用无序列表和一系列图像创建了一个水平菜单，例如“home”、“about”等。每个图像的宽度都不同，但高度相同，均为 25 像素。

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

当前代码如下：

<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%”（在代码中突出显示）将正确显示图像，但随后它们会换行而不是缩进。

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

4

1 回答 1

0

如果你想让你的设计具有响应性，你必须认为它会在用户调整屏幕大小时对屏幕宽度做出反应。然后，使所有图像具有相同的宽度会容易得多。根据您的设计，这是可能的，但我不建议在菜单中使用图片！！！如果您查看 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;
}
于 2012-11-22T14:47:52.397 回答