Как сделать два списка по горизонтали центральным

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%; 
} 

это выравнивает их вместе вместе на одной линии с поплавком: слева. Однако я пытаюсь централизовать их на странице шириной 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

.mem 
 
{ 
 
    float:left; 
 
    position: relative; 
 

 
}

<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>

Заключите как списки в Div теги и снова поставить их в один сНу и применить CSS. Попробуйте это, он решит вашу проблему. Не забудьте отметить это правильно.

Answer 3

Вот быстрый и простой способ использования встроенного блока, центра выравнивания текста и обертывания div.

.menu-wrap { 
 
    text-align:center; 
 
    } 
 

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

<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>