1

我试图有一个水平菜单，但 ul 向右而不是在中间对齐。

这是我的 CSS 和 HTML：

CSS：

#menu
{
    clear: both;
    float: left;
    width: 830px;
    display: inline;
    position: relative;
    z-index: 1;
    border-top: 1px solid #e9e6d9;
    border-bottom: 1px solid #e9e6d9; 
    margin: 0 auto;
    background-color:#FFFFFF;
    padding: 0;
}
#menu ul {
    margin: 0;
    display: block;
    text-align: center;
    padding: 0;
    float: right;
}
#menu li {
    /*font-family: Georgia, "Times New Roman", Times, serif;*/
    font-family: sans-serif, Helvetica, Arial;
    font-size: 13px;
    font-weight: normal;
    float: left;
    position: relative;
    list-style: none;
    margin: 0;
    display: inline-block;
    padding: 0;
}

HTML：

<div id="menu">
    <ul>
        <li>
            <a href="http://www.tahara.es/">
                <span>HOME</span>
            </a>
        </li>
        <li>
            <a href="http://www.tahara.es/shop/">
                <span>SHOP</span>
            </a>
        </li>
    </ul>   
</div>

提前感谢您的任何建议！

4

4 回答 4

1

改变#menu ul- 使用float: left而不是float: right 

#menu ul {
margin: 0;
display: block;
text-align: center;
padding: 0;
float: left;
}
于 2012-12-31T01:07:22.103 回答
1

我解决了你的问题。html代码没问题，我更改了css代码：

#menu
{
clear: both;
width: 830px;
display: inline;
position: relative;
z-index: 1;
border-top: 1px solid #e9e6d9;
border-bottom: 1px solid #e9e6d9; 
margin: 0 auto;
background-color:#FFFFFF;
padding: 0;
}
#menu ul {
margin: 0;
display: block;
text-align: center;
padding: 0;
}
#menu li {
    /*font-family: Georgia, "Times New Roman", Times, serif;*/
    font-family: sans-serif, Helvetica, Arial;
    font-size: 13px;
    font-weight: normal;
    position: relative;
    list-style: none;
    margin: 0;
    display: inline-block;
    padding: 0;​

我基本上删除了float:right;. 解决您的问题就这么简单。

这是一个演示。

如果您需要进一步的帮助，我可以帮助您。

我还建议你一些链接，你可以找到对构建 css 菜单有用的链接：

http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/

于 2012-12-31T01:24:11.367 回答
1

您可以删除浮动属性。只需在#menu ul 中添加宽度并添加边距：0 auto; 使其居中。

例子 ：

#menu ul {
    width: 300px;
    margin: 0 auto;
}

现场演示：http: //codepen.io/joe/pen/uAaHo

于 2012-12-31T01:24:23.460 回答
0

定位菜单的最简单代码非常简单。

此代码工作正常，在最新的 Safari、Chrome、Opera、Firefox 上测试。也在 IE11 和 IE8 上。

http://jsfiddle.net/5ZrEx/

#menu
{
  width: 830px; 
  margin: 0 auto;
  display: inline;
}
  #menu ul {    
  text-align: center;
}
#menu li {     
  display: inline-block;    
}
于 2014-05-16T14:52:19.663 回答