Question

我需要将菜单项与中心对齐而不使用填充...它目前就像this .. 我需要文本居中对齐，如this。

我使用的代码是：

<div style="float:left; width:931px; background:url(images/cbw_consulting_07_1.jpg) repeat-x; height:39px;">
    <ul style="float:left; width:931px; font-family:Monotype Corsiva; font-size:21px; color:#FFFFFF; padding:5px 0px 0px 0px">
        <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">Home</a></li>
        <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">About Us</a></li>
        <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">Fabulous Finds</a></li>
    </ul>
</div>

Answer 1

保证金：0自动;在您的ul和固定宽度将帮助您。此外，最好不要使用无线样式

<html>
<head>
    <style>
        ul {
           font-family:Monotype Corsiva;
           font-size: 21px;
           color: #FFFFFF;
           padding:5px 0px 0px 0px;
           display: block;
           width: 300px;
           margin: 0 auto;
        }
    </style>
</head>
<body>
<div style="width:931px; background-color: #ff00ff; height:39px;">
    <ul>
        <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">Home</a></li>
        <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">About Us</a></li>
        <li style="float:left; padding:0px 10px 0px 10px; list-style-type:none; list-style:none;"><a href="#">Fabulous Finds</a></li>
    </ul>
</div>
</body>
</html>

Answer 2

给你的UL固定宽度大约相当于你的3 li的宽度。然后使用margin: auto;你不需要你的UL浮动：左;列表样式和列表样式类型是UL元素的特征，不适用于LI ...您可以简化填充填充：0 10px; === padding：0 10px 0 10px;如果值为0，则无需指定单位，因为0px == 0pt == 0em等......

Answer 3

试试这个

<div style="float: left; width: 931px;    background:url(&quot;images/cbw_consulting_07_1.jpg&quot;) repeat-x scroll 0% 0% transparent; height: 39px;">
<center>
<ul style="font-family: Monotype Corsiva; font-size: 21px; color: rgb(255, 255, 255); display: inline; background: none repeat scroll 0% 0% Red; padding: 5px 0pt 0pt;">
    <li style="padding: 0px 10px; list-style: none outside none; display: inline;"><a href="#">Home</a></li>
    <li style="padding: 0px 10px; list-style: none outside none; display: inline;"><a href="#">About Us</a></li>
    <li style="padding: 0px 10px; list-style: none outside none; display: inline;"><a href="#">Fabulous Finds</a></li>
</ul></center>
</div>

需要一些简单的样式更改

3 个答案: