的CSS保證金自動中心 <li> 標簽

Question

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<style>
body,html,aside,article,header,nav,footer,ul,section,div,li,ul{
    padding:0;
    margin:0;
}

aside,article,header,nav,footer,section,div,ul {
    display:block;
    margin:0;
    padding:0;
}
html {
    background:#F1C4F2;
}
body {
    width:1000px;
    background:#FF53A9;
    margin: 0 auto;
    font-size:12px;

}

#header{
    width:98%;
    background-color:#F081F3;
    padding:1%;
    color:white;
    font-size:1.2em;
}

#nav {
    width:98%;
    background-color:#C043AA;
    font-size:1.1em;
    padding:1%;
}

ul{
    margin:0 auto;
    width:100%
}

li {
    list-style:none;
    float:left;
    margin-right:8%;
    color:white;

}
     OR
/*   
     li {
    list-style:none;
    display:inline-block;
    margin-right:8%;
    color:white;

}

    */ 
</style>


<body>

<div id="header">
some.com
</div><!--HEADER-->

<div id="nav">
<ul>
    <li>Home</li>
    <li>Bio</li>
    <li>Gallery</li>
    <li>Upcoming Projects</li>
    <li>Videos</li>
</ul>
</div><!--NAVIGATION-->

<div id="footer"> </div> <!--FOOTER-->

</body>
</html>

我在'NAV' <DIV>有'UL'標簽，對於我的導航，我創建了'LI'項目並將其浮動，當我應用“” margin:0 auto “”時，它不適用。
甚至當我使用“” display:inline-block “”（本節注釋）到“ LI ” .JS

小提琴鏈接： jsfiddle

Answer 1

嘗試為<ul>添加text-align：center，並從<li>刪除float:left ，並使用display:inline-block; 演示

ul {
    margin:0 auto;
    width:100%;
    text-align:center;
}
li {
    list-style:none;
    display:inline-block;
    margin-right:8%;
    color:white;
}

Answer 2

這將使您的ul居中，並且我還添加了overflow:hidden以便包含浮點數（ li ）。

ul {
  margin: 0 auto;
  width: 50%;
  overflow: hidden; 
}

您正在將margin:0px auto應用於無法正常工作的100％寬度元素。

結果：固定

Answer 3

首先， ul 是居中的，但寬度為100％，所以我認為實際上是這樣。 您希望列表項位於ul 。

因此，刪除所有浮點，在ul上設置text-align:center並使li顯示為inline-block

 * { padding: 0; margin: 0; } html { background: #F1C4F2; } body { width: 1000px; background: #FF53A9; margin: 0 auto; font-size: 12px; } #header { width: 98%; background-color: #F081F3; padding: 1%; color: white; font-size: 1.2em; } #nav { width: 98%; background-color: #C043AA; font-size: 1.1em; padding: 1%; text-align: center; } ul { background: blue; } li { list-style: none; display: inline-block; color: white; margin: 0 2%; }

 <body> <div id="header"> some.com </div> <!--HEADER--> <div id="nav"> <ul> <li>Home</li> <li>Bio</li> <li>Gallery</li> <li>Upcoming Projects</li> <li>Videos</li> </ul> </div> <!--NAVIGATION--> <div id="footer"></div> <!--FOOTER-->

的CSS保證金自動中心 <li> 標簽

問題描述

3 個解決方案

解決方案1
1 已采納 2015-03-20 11:03:19

解決方案2
0 2015-03-20 11:06:00

解決方案3
0 2015-03-20 11:07:06

的CSS保證金自動中心 <li> 標簽

問題描述

3 個解決方案

解決方案1 1 已采納 2015-03-20 11:03:19

解決方案2 0 2015-03-20 11:06:00

解決方案3 0 2015-03-20 11:07:06

解決方案1
1 已采納 2015-03-20 11:03:19

解決方案2
0 2015-03-20 11:06:00

解決方案3
0 2015-03-20 11:07:06