Question

我在下面有一个下拉列表，但我正在以菜单为中心。我试图在它周围添加<center>标签，并将ul设置为margin auto 0，但它不起作用。有什么遗失吗？

<style type="text/css">
ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
    background: #1e7c9a;
}

</style>
</head>

<body>


<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Logo Design</a></li>
<li><a href="#">Blog Design</a></li>
</ul>
</li>
<li><a href="#">Projects</a>
<ul>
<li><a href="#">This is a project</a></li>
<li><a href="#">So is this</a></li>
<li><a href="#">and this</a></li>
<li><a href="#">don't forget this too</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Quote</a></li>
<li><a href="#">General Enquiry</a></li>
</ul>
</li>
</ul>

我继续把它放在jsfiddle Here

上

Answer 1

我认为你实际上想要使列表项居中而不仅仅是菜单。

JSfiddle Demo

修改CSS

ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: center; /* added this */
    font-size:0; /* whitespace adjustment */
}
ul li {
    font-size:1rem; /* font-size reset */
    display: block;
    position: relative;
    /* float: left; removed this */
    display: inline-block;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
    background: #1e7c9a;
}

Answer 2

您想要整个菜单居中吗？如果是这样，将所有内容都固定在某些内容中会有所帮助，例如table或div

所以我在你的代码中添加了以下内容：

CSS

    #navbar {
    width: 50%;
    margin: 0 auto;
    }

HTML

<div id="navbar">
all your ul/li's
</div>

一起

<style type="text/css">
    ul {
        font-family: Arial, Verdana;
        font-size: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul li {
        display: block;
        position: relative;
        float: left;
    }
    li ul {
        display: none;
    }
    ul li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
        border-top: 1px solid #ffffff;
        padding: 5px 15px 5px 15px;
        background: #1e7c9a;
        margin-left: 1px;
        white-space: nowrap;
    }
    ul li a:hover {
    background: #3b3b3b;
    }
    li:hover ul {
        display: block;
        position: absolute;
    }
    li:hover li {
        float: none;
        font-size: 11px;
    }
    li:hover a { background: #3b3b3b; }
    li:hover li a:hover {
        background: #1e7c9a;
    }

    #navbar {
    width: 50%;
    margin: 0 auto;
}

    </style>
    </head>

    <body>

    <div id="navbar">
    <ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a>
    <ul>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Graphic Design</a></li>
    <li><a href="#">Logo Design</a></li>
    <li><a href="#">Blog Design</a></li>
    </ul>
    </li>
    <li><a href="#">Projects</a>
    <ul>
    <li><a href="#">This is a project</a></li>
    <li><a href="#">So is this</a></li>
    <li><a href="#">and this</a></li>
    <li><a href="#">don't forget this too</a></li>
    </ul>
    </li>
    <li><a href="#">Contact</a>
    <ul>
    <li><a href="#">Support</a></li>
    <li><a href="#">Quote</a></li>
    <li><a href="#">General Enquiry</a></li>
    </ul>
    </li>
    </ul>
        </div>

Answer 3

这是一个JSFiddle演示了我认为你之后的事情：JSFiddle

基本上，我将您的父<li>更改为display: inline-block并删除了float: left属性。为了将这些父导航项目居中，我将text-align: center应用于父<ul>。然后，我将嵌套下拉列表ul ul更改为text-align: left，然后将<li>＆＃39}设置为display: block。

最终CSS（将某些选择器更改为不同的目标）：

ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center; /* added this */
}
ul > li {
    display: inline-block; /* changed from display: block */
    position: relative;
    /*float: left;*/
}
ul ul { text-align: left; } /* added this */
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
ul ul li { display: block; } /* added this */
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
    background: #1e7c9a;
}

无法中心下拉菜单

3 个答案: