边距 0 自动不居中 ul？答案

【问题标题】：Margin 0 auto not centering the ul?边距 0 自动不居中 ul？
【发布时间】：2014-01-18 19:01:07
【问题描述】：

我正在尝试将 ul div 置于标题 div 的中心。

HTML 代码：

<header>
   <h1>Responsive HTML5</h1>
     <p>This is a demo</p>
    <nav>
      <ul>
         <li><a href="javascript:void(0)">Home</a></l1>
         <li><a href="Javascript:void(0)">About</a></l1>
         <li><a href="Javascript:void(0)">Services</a></l1>
         <li><a href="Javascript:void(0)">Contact</a></l1>
      </ul>
    </nav>
</header>

CSS 代码

这是媒体查询的 css 代码，基本布局一切正常，但无法使用此代码。

@media screen and (max-width: 932px){
        header{position: static; overflow: hidden; background-color: #666;}
        header h1, header p{text-align: center;}
        nav{float:left; position: static; padding: 1px;}
        nav ul{width: 60%; margin: 0 auto;}
}

【问题讨论】：

您正在尝试使宽度为100% 的元素居中。减小宽度。
您遇到了问题，因为无论您做什么，文本都向左对齐。你需要像文本对齐这样的东西。您可以像 JoshC 所说的那样减小宽度，但这不会那么灵活。看看这个jsfiddle。 jsfiddle.net/F2Eza 编辑：jsfiddle.net/F2Eza 用于 JoshC 的解决方案。这不太灵活，但可以让您的项目符号一致。
我粘贴的代码宽度错误，否则为 60%，我已更新。
如果你删除浮动：左；从导航 CSS，你会得到它半居中。它仍然会偏斜，因为它以 60% 的宽度而不是文本的宽度居中 - 你可以在这里看到这一点 jsfiddle.net/9U7yR 将导航 ul 的宽度设置为更合适的设置以包裹文本将使其居中。跨度>

标签： html css margin

【解决方案1】：

nav
{
 position: static;
 padding: 1px;
 /* remove float: left; */
}
nav ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
}

将强制 TEXT 居中，但不一定是项目符号点。设置list-style-type: none; 将完全删除项目符号，形成一个居中的无序列表。

仅供参考，您的</li> 标签应该是</li>，而不是</l1>

编辑：这里有一个JSFiddle 供您查看

【讨论】：

嗯，好的。如果您从nav 标签中删除float: left;，它应该居中

【解决方案2】：

集中你的 UL 可以做的最简单的事情是为 .nav 创建一个 CSS

.nav
{
margin: 0 auto;
list-style-type: none;
text-align: center;
}

你的 HTML 代码也有错误，你已经用 /l1 关闭了 li 标签（应该是 /li）本身就是一个错误。希望这会对你有所帮助。

【讨论】：

不是.nav，是nav

【解决方案3】：

@media screen and (max-width: 932px){
    header{position: static; overflow: hidden; background-color: #666;}
    header h1, header p{text-align: center;}
    nav{ margin: 0 auto; list-style-type: none; text-align: center;}
    nav ul{width: 60%; margin: 0 auto; list-style-type:none; }
}

【讨论】：