html - 如何使两个列表水平居中

我有两个列表，我希望两个列表可以并排。但我也希望它们成为页面的中心。它们都在纯菜单div内，所以当我尝试在两者上都放一个外部div时，它们似乎就隐藏了/消失了。

示例代码：

<div id="submenu" class="pure-hidden-tablet pure-hidden-desktop pull-left">
    <div class="pure-menu pure-menu-open ">
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
 <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
 </div>
</div>

CSS：

.rightMenu{
   margin-left:20%;
   float:left;
 }
 .leftMenu{
  float:left;
   margin-left:20%;
 }

这使它们与float：left对齐在一起。但是，我正在努力将它们集中在100％宽度的页面上。

最佳答案

要使内容居中，请使用包装器。

.wrapper {
  width: 80%; // define it's width
  margin: 0 auto; // set margins. auto will center it
}

然后包装您的标记。

<div class="wrapper">
  <ul>
    <li></li>
  </ul>
  <ul>
    <li></li>
  </ul>
</div>

Demo

关于html - 如何使两个列表水平居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26889267/