Question

我有两个列表，我希望彼此并排。但我也希望它们成为页面的核心。它们都在一个纯菜单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％宽度的页面上。

Answer 1

以内容为中心使用包装器。

.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

Answer 2

＆＃13;

.mem
{
    float:left;
    position: relative;

}

＆＃13;

<div>
<div class="mem">
<ul>
    <li>hi</li>
    <li>hello</li>
</ul>
</div>
<div class="mem">
    <ul>
    <li>hi</li>
    <li>hello</li>
</ul>
</div>
</div>

＆＃13;

将两个列表括在div标签中，然后再将它们放在一个div中并应用css。试试这个会解决你的问题。别忘了勾选它。

Answer 3

这是使用内联块，文本对齐中心和包装div的快速简便方法。

＆＃13;

.menu-wrap {
  text-align:center;
    }

.menu-wrap ul {
  display:inline-block;
  }

＆＃13;

<div class="menu-wrap">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
 <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
  </div>

＆＃13;

如何使两个列表水平居中

3 个答案: