Question

我有一个像这样的简单布局：

<html>
    <body>
        <div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
           </ul>
      </div>
  </body>

但我无法弄清楚如何水平和动态地居中这个菜单。 CSS就在这里http://codepen.io/syarifphmy/pen/egvsk。我认为它与＆lt;的宽度有关。 ul＆gt;。但是，如果我以固定大小说出它，例如500px，那么它就不会是动态的。我希望它符合列表。

Answer 1

使用display：table;

ul{
  display: table;
  list-style: none;
  padding:0;
  margin:0 auto;
}

工作示例：http://codepen.io/anon/pen/zpxyD

另外，不相关：我建议给你的主播显示：阻止，所以他们使用整个li空间。现在你必须找到li里面的文字来实际点击链接。

Answer 2

您可以使用text-align居中（非浮动）内联块子项：

ul{
  text-align: center;
}
li{
  display: inline-block;
  float: none; /* default value */
}

＆＃13;

*{
  margin:0;
}

li:first-child{
  border-radius:5px 0 0 5px;
}
li:last-child{
  border-radius:0 5px 5px 0;
}
ul{
  text-align: center;
  list-style: none;
  padding:0;
}
a{
  color:white;
  text-decoration:none;
  font-size:5vmin;
}
li{
  display:inline-block;
  background-color: #98bf21;
  padding:5px 20px;
}
li:hover{
  background-color: #7A991A;
}

＆＃13;

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">About</a></li>
</ul>

＆＃13;

Answer 3

我在这里看不到编码器snippit，所以我做了自己的小提琴。不确定你是否想要水平或垂直项目，所以我做了两个。

div#one { width: 100%; overflow: hidden; }
div#one ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
div#one ul li { position: relative; float: left; display: block; right: 50%; margin-right: 20px; }


div#two { width: 100%; overflow: hidden; }
div#two ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
div#two ul li { position: relative; display: block; right: 50%; text-align: center; }

这会引发加价：

<div id="one">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
       </ul>
  </div>

<div id="two">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">A REALLY LONG TITLE</a></li>
       </ul>
  </div>

演示：http://jsfiddle.net/x40h8Ldh/1/

请确保您使用的是STRICT DTD，因为其中一些概念不会在声明<html>的情况下跨浏览器工作。

CSS - 我无法动态地将菜单置于中心（水平）

3 个答案: