如何使用ul定位菜单栏 [英] How I can center a menu bar with ul

问题描述

我有一个简单的菜单栏里面的div，我可以使div的中心，但我想把菜单栏放在div。

这是代码：

$ b

CSS ：

  * { 
 margin：0px; 
 padding：0px; 
} 
 
 
 .menu {
 height：35px; 
 width：auto; 
 background：url（../ img / slash-layer.png）repeat scroll 0％0％rgb（130，28，107）; 
 border-radius：15px; 
 padding-top：10px; 
} 
 
 ul＃navmenu，ul.sub1，ul.sub2 {
 list-style-type：none; 
 font-size：9pt; 
 max-width：660px; 
 margin：0 auto; 
} 
 ul＃navmenu li {
 width：125px; 
 text-align：center; 
 position：relative; 
 float：left; 
 margin-right：4px; 
} 
 ul＃navmenu a {
 text-decoration：none; 
 display：block; 
 width：125px; 
 height：25px; 
 line-height：25px; 
 background-color：#FFF; 
 border：1px solid #CCC; 
 border-radius：10px; 
} 
 ul＃navmenu .sub1 li {
} 
 ul＃navmenu .sub1 a {
 margin-top：5px; 
} 
 ul＃navmenu .sub2 a {
 margin-left：3px; 
} 
 ul＃navmenu li：hover> a {
 background-color：#CFC; 
} 
 ul＃navmenu li：hover a：hover {
 background-color：＃FF0; 
} 
 ul＃navmenu ul.sub1 {
 display：none; 
 position：absolute; 
 top：26px; 
 left：0px; 
} 
 ul＃navmenu ul.sub2 {
 display：none; 
 position：absolute; 
 top：0px; 
 left：126px; 
} 
 ul＃navmenu li：hover .sub1 {
 display：block; 
} 
 ul＃navmenu .sub1 li：hover .sub2 {
 display：block; 
} 
 .darrow {
 font-size：11pt; 
 position：absolute; 
 top：5px; 
 right：4px; 
} 
 .rarrow {
 font-size：13pt; 
 position：absolute; 
 top：6px; 
 right：4px; 
} 
  

HTML： b

 < html> 
< head> 
< title><？php echo $ title; ？>< / title> 
< link rel =stylesheettype =text / csshref =recursos / css / main.css> 
< meta charset =utf-8> 
< div class =logo>< / div> 
< div class =menu> 
< ul id =navmenu> 
< li>< a href =＃>首页< / a>< / li& 
< li>< a href =＃> Novedades< / a>< / li> 
< li>< a href =＃>分类< span class =darrow>▼< / span>< / a& 
< ul class =sub1> 
< li>< a href =＃>Acción< / a>< / li> 
< li>< a href =＃> Aventuras< / a>< / li> 
< / ul>< / li> 
< li>< a href =＃>个人档案< span class =darrow>▼< / span>< / a> 
< ul class =sub1> 
< li>< a href =＃>菜单4.1< / a>< / li> 
< li>< a href =＃>菜单4.2< span class =rarrow>▶< / span>< / a& 
< ul class =sub2> 
< li>< a href =＃>菜单4.2.1< / a>< / li> 
< li>< a href =＃>菜单4.2.2< / a>< / li> 
< / ul>< / li> 
< / ul>< / li> 
< / ul> 
< / div> 
< / head> 
< body> 
  

我试图把

  ul＃navmenu {
 display：block 
} 
  

但是它不工作，我不明白什么...因为我可以集中的div ...

我该怎么办呢？ p>

解决方案

首先，请注意您应该将元素放在< body> 标签。

实际上， ul 元素在中心对齐（参见 a href =http://jsfiddle.net/hashem/pN78K/ =nofollow> demo here ）。

有两个选项：

p>

1. 使用适当的固定宽度（或最大宽度如同您所做的）< ul& / code>元素。 工作演示




2. 或者对列表项使用 display：inline-block 而不是 float：left 并使用 text-align：center 为 ul 水平对齐内嵌元素。 工作演示 。

但注意在内嵌（-block）元素之间有一个空格内联流中的内联元素的正常行为。您可以参考 我的回答 解决这个问题。

I have a simple menu bar inside a div and I can center the div but I want to center the menu bar inside the div.

This is the code:

CSS:

* {
    margin: 0px;
    padding: 0px;
}


.menu {
    height: 35px;
    width: auto;
    background: url("../img/slash-layer.png") repeat scroll 0% 0% rgb(130, 28, 107);
    border-radius: 15px;
    padding-top: 10px;
}

ul#navmenu, ul.sub1, ul.sub2 {
    list-style-type: none;
    font-size: 9pt;
    max-width: 660px;
    margin: 0 auto;
}
ul#navmenu li {
    width: 125px;
    text-align: center;
    position: relative;
    float: left;
    margin-right: 4px;
}
ul#navmenu a {
    text-decoration: none;
    display: block;
    width: 125px;
    height: 25px;
    line-height: 25px;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 10px;
}
ul#navmenu .sub1 li {
}
ul#navmenu .sub1 a {
    margin-top: 5px;
}
ul#navmenu .sub2 a {
    margin-left: 3px;
}
ul#navmenu li:hover > a {
    background-color: #CFC;
}
ul#navmenu li:hover a:hover {
    background-color: #FF0;
}
ul#navmenu ul.sub1 {
    display: none;
    position: absolute;
    top: 26px;
    left: 0px;
}
ul#navmenu ul.sub2 {
    display: none;
    position: absolute;
    top: 0px;
    left: 126px;
}
ul#navmenu li:hover .sub1 {
    display: block;
}
ul#navmenu .sub1 li:hover .sub2 {
    display: block;
}
.darrow {
    font-size: 11pt;
    position: absolute;
    top: 5px;
    right: 4px;
}
.rarrow {
    font-size: 13pt;
    position: absolute;
    top: 6px;
    right: 4px;
}

HTML:

<html>
<head>
    <title><?php echo $title; ?></title>
    <link rel="stylesheet" type="text/css" href="recursos/css/main.css">
    <meta charset="utf-8">
    <div class="logo"></div>
    <div class="menu">
    <ul id="navmenu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Novedades</a></li>
        <li><a href="#">Categorías <span class="darrow">▼</span></a>
        <ul class="sub1">
            <li><a href="#">Acción</a></li>
            <li><a href="#">Aventuras</a></li>
        </ul></li>
        <li><a href="#">Profile <span class="darrow">▼</span></a>
        <ul class="sub1">
            <li><a href="#">Menu 4.1</a></li>
            <li><a href="#">Menu 4.2 <span class="rarrow">▶</span></a>
            <ul class="sub2">
                <li><a href="#">Menu 4.2.1</a></li>
                <li><a href="#">Menu 4.2.2</a></li>
            </ul></li>
        </ul></li>
    </ul>
    </div>
</head>
<body>

I tried to put

ul#navmenu {
    display: block
}

but it doesn't work and I don't understand what... Because I can center the div...

How I can do it?

解决方案

First of all, please note that you should put the elements inside the <body> tag.

Actually, The ul element is aligned at the center (See demo here). But the point is that the list items are floated to the left.

There are tow options:

1. Using a proper fixed width (or max-width as you did) for the <ul> element. Working Demo

2. Or use display: inline-block instead of float: left for the list items, and use text-align: center for the ul to align the inline elements horizontally. Working Demo.

But note that there is a white space between inline(-block) elements, which absolutely the normal behavior of inline elements in inline flow. You can refer my answer here to fix that.

这篇关于如何使用ul定位菜单栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！