0

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

现在怎么样--->应该怎么样

JSFiddle

我尝试了很多东西，但找不到任何有用的东西。这是我当前的，可怕的 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%
}
4

2 回答 2

3

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

我已经从 - http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm下载了 2 列灵活布局

然后使用这个技巧来适应你的菜单 -拉伸水平 ul 以适应 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 ;
}

我把边框放在那里，所以你可以看到你的布局是如何定位的。一旦清楚它是如何工作的，您就可以删除它们。

于 2013-09-13T12:27:58.287 回答
0

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

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

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

[更新]

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

于 2013-09-13T11:08:22.103 回答