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>

我在'UL'内有'NAV' <DIV>个标记，对于我的导航，我创建了一个'LI'项并将其浮动，当我应用“margin:0 auto时，”它不会不适用。
即使我使用“display:inline-block”“（此部分已注释掉）到”LI“。Js

小提琴链接：jsfiddle

Answer 1

尝试为<ul>添加text-align：center并从float:left删除<li>并使用display:inline-block; Demo

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％宽度的元素，该元素无效。

结果：fixed

Answer 3

首先，ul 以为中心，但它是100％宽，所以我假设其实。您希望列表项以ul。

为中心

因此，删除所有花车，在text-align:center上设置ul并将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-->

<li>标签</li>的CSS保证金自动中心

3 个答案: