html - 如何在大分辨率屏幕上对齐水平菜单链接？

Question

我有水平菜单。这个菜单有两个问题:

1. 当我调整浏览器大小时，它会变成响应式菜单。
2. 当我在大分辨率屏幕上打开页面时，菜单没有全屏显示。

我不需要响应式菜单。

如何纠正以下问题:

1. 每个链接应该等宽
2. 链接名称和左/右边框之间的间距应相等。
3. 菜单的宽度应为 100%。

我的代码在这里:

<div class="menudiv">
<div class="menu">
    <ul>
        <li><a href="#"><img src="img/img1.png" alt="">Link1</a></li>
        <li><a href="#"><img src="img/img1.png" alt="">Link1</a></li>
        <li><a href="#"><img src="img/img1.png" alt="">Link1</a></li>
        <li><a href="#"><img src="img/img1.png" alt="">Link1</a></li>
        <li><a href="#"><img src="img/img1.png" alt="">Link1</a></li>       
        <li><a href="#"><img src="img/img1.png" alt="">Link1</a></li>                  
    </ul>
</div>
</div>
<style>
.menudiv {
    width: 94%;
    margin:0 3%;

}
.menu {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}
.menu ul ul {
    display: none;
    margin:4px 0 0 0;
}
.menu ul li:hover > ul {
    display: block;
}
.menu ul {
    background: #646464;
    margin: 0;
    list-style: none;
    position: relative;
    padding: 0;

    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;

}
.menu ul:after {
    content: "";
    clear: both;
    display: block;
}
.menu ul li {
    float: left;
    border-bottom: 3px solid transparent;
    border-right: 1px solid #000;
}
.menu ul li:last-child{
    border:none;
}
}
.menu ul li:hover {
    background: #111312;
    border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
    color: #fff;
}
.menu ul li a {
    display: block;
    padding: 11px 42px;

    color: #fff;
    text-decoration: none;
}
.menu ul ul {
    background: #111312;
    padding: 0;
    position: absolute;
    top: 100%;
}
.menu ul ul li {
    float: none;
    position: relative;
    border-right:none;
}
.menu ul ul li a {
    padding: 10px;
    color: #000;
    display: block;
}
.menu ul ul li a:hover {
    background: #111312;
    color: #fff;
}
.menu ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
    padding: 0;
}
.menu ul ul ul li {
    float: none;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid pink;
    position: relative;
}
.menu ul ul ul li a {
    padding: 10px;
    color: #fff;
    display: block;
    text-decoration: none;
}
.menu ul ul ul li a:hover {
    background: #95CEF1;
    color: #000;
}
.menu ul ul ul ul {
    position: absolute;
    left: 100%;
    top: 0;
}
.head {
    width: 500px;
    height: 200px;
    background: #789;
}
.foot {
    width: 500px;
    height: 200px;
    background: #123;
}
</style>

Answer 1

您可以使用 display:table、display:table-row 和 display:table-cell css 属性来获得您想要的内容达到。

CSS:

.menu {
  display: table;
  width:100%;
}
.menu ul {
  list-style:none; margin:0 padding:0;
  display:table-row
}
.menu ul li{
  display:table-cell;
}
.menu ul li > a {
  display:block;
  padding:2px 4px;
    background:#333;
  color:#fff;
  text-decoration:none;
}

还可以为这种类型的 css 结构做更多的定制。 fiddle 链接 http://jsfiddle.net/ZnRcY/