Html 需要一些简单的样式更改_Html_Css

Html 需要一些简单的样式更改

html css

Html 需要一些简单的样式更改,html,css,Html,Css,我需要我的菜单项与中心对齐而不使用填充。。。目前的情况是。。我需要文本像这样居中对齐我使用的代码是： <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

我需要我的菜单项与中心对齐而不使用填充。。。目前的情况是。。我需要文本像这样居中对齐

我使用的代码是：

<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>

给你的UL一个固定宽度，大约相当于你的3个li的宽度。然后使用

margin:auto你不需要你的UL是浮动的：左；此外，列表样式和列表样式类型适用于UL元素，而不适用于LI的。。。您可以简化填充：0 10px；==填充：0 10px 0 10px；如果值为0，则无需指定单位，因为0px==0pt==0em等。
为UL提供一个固定宽度，该宽度大致对应于3 li的宽度。然后使用margin:auto你不需要你的UL是浮动的：左；此外，列表样式和列表样式类型适用于UL元素，而不适用于LI的。。。您可以简化填充：0 10px；==填充：0 10px 0 10px；如果值为0，则无需指定单位，因为0px==0pt==0em等。
边距：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>


保险商实验室{
字体系列：单字体Corsiva；
字号：21px；
颜色：#FFFFFF；
填充：5px 0px 0px 0px；
显示：块；
宽度：300px；
保证金：0自动；
}





页边距：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>


保险商实验室{
字体系列：单字体Corsiva；
字号：21px；
颜色：#FFFFFF；
填充：5px 0px 0px 0px；
显示：块；
宽度：300px；
保证金：0自动；
}





试试这个
<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>







试试这个
<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>







这是一个很好的例子，但是为什么不将填充的值缩短为，直到使用边距为止<代码>填充：5px 0px 0px 0px=填充：5px0
和填充：0px 10px 0px 10px=填充：0 10px
@meo。。。它的bcoz我发现它很容易记忆和工作，当它像填充：9px 0px 0px 0px；不是填充：9px 0 0…@Skeleton:我知道了，但是你为什么不使用margin:0px auto 0px auto，而不是margin:0 auto；至少它是一致的。@meo margin:0 auto只是一个快捷方式，这就是我使用它的原因。还有我刚才复制的填充；）很好的例子，但是为什么不将填充的值缩短为，直到使用边距为止<代码>填充：5px 0px 0px 0px=填充：5px0
和填充：0px 10px 0px 10px=填充：0 10px
@meo。。。它的bcoz我发现它很容易记忆和工作，当它像填充：9px 0px 0px 0px；不是填充：9px 0 0…@Skeleton:我知道了，但是你为什么不使用margin:0px auto 0px auto，而不是margin:0 auto；至少它是一致的。@meo margin:0 auto只是一个快捷方式，这就是我使用它的原因。还有我刚才复制的填充；）