Pure.CSS заголовок меню и список меню в той же строке

Question

Я использую среду Pure.css (purecss.io) для размещения веб-сайта. Я использую горизонтальное меню в верхней части экрана. Я не могу понять, как позиционировать пункты меню на одной и той же (первой) строке в качестве заголовка меню. то есть в HTML:

<div class="header"> 
    <div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed"> 
     <a class="pure-menu-heading" href="">My Website</a> 
     <ul class="pure-menu-list"> 
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tour</a></li> 
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li> 
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Log In</a></li> 
     </ul> 
    </div> 
</div> 

Я использую стандартный файл pure.css, и я подозреваю, что проблема что-то сделать либо с помощью уль тега или потому, что чистая раскладка по умолчанию является вертикальным меню под заголовком меню. Кто-нибудь мог позиционировать заголовок и список в одной строке (например, в соответствии с заголовком начальной загрузки)?

Answer 1

Если вы хотите li s быть в одной строке, рядом друг с другом, вы можете использовать поплавки:

.pure-menu-list{ list-style: none; } 
.pure-menu-list li{ float: left; } 

Итак:

.pure-menu-heading{ float: left; } 
 
.pure-menu-list{ float: left;list-style: none; margin: 0; } 
 
.pure-menu-list li{ float: left; margin-right: 10px; }

<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed"> 
 
     <a class="pure-menu-heading" href="">My Website</a> 
 
     <ul class="pure-menu-list"> 
 
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tour</a></li> 
 
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li> 
 
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">Log In</a></li> 
 
     </ul> 
 
    </div>