Question

这让我发疯了。我有一个水平菜单，ul里面有很多li个元素。 li元素包含作为链接的img元素。我希望菜单尽可能宽，按比例保持其整个比例。 调整页面大小也应按比例调整菜单大小。

我尝试了很多东西，却找不到有用的东西。这是我目前可怕的CSS：

#container {
    display: inline;
    padding: 0 0;
    margin: 0 0;height: 20px;
    display: block;
}
#container ul {
    display: inline;
    list-style: none;
    white-space: nowrap;
    padding: 0 0;
    margin: 0 0;
    height: 100%;
    width: auto;
}
#container ul li {
    display: inline;
    list-style-type: none;
    padding: 0 0;
    margin: 0 0;
    float: left;
    height: inherit;
    max-width: 100%
}
#container ul li img {
    height:100%;
    max-width: 100%
}

Answer 1

好的，我查看了你的代码并提出了一个不同的解决方案：

我已从 - http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm

下载了2列灵活布局

然后使用此技巧使您的菜单适合 - Stretch horizontal ul to fit width of div

代码太长了，所以这里是jsFiddle - http://jsfiddle.net/GF9Lr/

但主要是：

/* reset image and allow center align */
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#menu {
    clear:both;

}
#menu ul {
    display: table;
    float:left;
    width:100%;
    list-style:none;
    margin: 0;
    padding:0;
    margin-bottom: 20px; /*this is for top margin of content */
}
#menu ul li {
    display: table-cell;
/*  display:inline; your old code*/
    list-style:none;
    text-align:center;
    background:#eee;
    border: 1px solid red;
    margin:0;
    padding:0;
}
#menu ul li a {
    display:block;
    color:#000;
    text-decoration:none;
    position:relative;
    margin: 0 ;
}

我在那里放置了边框，因此您可以看到布局的位置。一旦明确了它的工作方式，您就可以删除它们。

Answer 2

尝试添加适当的宽度以帮助，尝试将代码更改为：

#container ul li img {
    height:100%;
    width: 30px;
}

注意：jsfiddle将提供更多帮助，并有助于提供具体的解决方案

[更新]

希望以下jsfiddle解决您的问题： http://jsfiddle.net/avdhut/bAFWv/2/

按比例调整由图像组成的水平无序列表菜单

2 个答案: