Question

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

当我调整浏览器大小时，它将更改为自适应菜单。
当我在大分辨率屏幕打开页面时，菜单没有全屏显示。

我不需要响应式菜单。

如何纠正以下事项：

每个链接应该等于宽度
链接名称与左/右边框之间的空格应相等。
菜单应为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结构进行更多自定义。小提琴链接http://jsfiddle.net/ZnRcY/

Answer 2

你可以试试这个

<强> Working Fiddle here

.menudiv {
   width: 94%;
   margin:0 3%;
   -moz-border-radius: 13px;
   -webkit-border-radius: 13px; background: #646464;

}
.menu {
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
   text-align:center;display:table;
   width:100%;
 }
.menu ul {

   margin: 0;
   list-style: none;
   position: relative;
   padding: 0;
   display:table-row;
}
.menu ul li {
   display:table-cell;
   border-bottom: 3px solid transparent;
   border-right: 1px solid #000;
}

祝你好运......

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

2 个答案: