Выравнивание элементов из навигационной панели

В моем последнем проекте, у меня есть представление с именем index.html с кодом, как это:Выравнивание элементов из навигационной панели

<body> 
     <header> 
     <ul> 
      <li><a th:href="@{/}" class="title">Loja</a></li> 
      <li><a href="#">blablabla</a></li> 
      <li><a href="#">blablabla</a></li> 
      <li><a href="#">blablabla</a></li> 
     </ul> 
     <ul class="right"> 
      <li><a href="#" class="user"/>username</li> 
      <li><a th:href="@{/admin}">admin</a></li> 
      <li><a th:href="@{/logout}">logout</a></li> 
     </ul> 
     </header> 
    </body>

стиль CSS для заголовка такова:

header ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

header ul.right { 
    float:right; 
} 

header li { 
    float: left; 
} 

header li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-family: 'Oxygen Mono'; 
} 

header li a:hover { 
    background-color: #111; 
} 

header li.active { 
    background-color: #4CAF50; 
}

Когда я открываю эту страницу в браузере, элементы, расположенные с правой стороны, отображаются в другой строке (см.: https://jsfiddle.net/klebermo/ch6gtj3p/). Кто-нибудь знает, что я могу изменить в css для исправления?

источник

2016-06-06 Kleber Mota

Поскольку левая строка меню не плавает. Вы должны добавить:

header ul { 
    float: left; 
}

и установить цвет фона header тега вместо:

header { 
    background-color: #333; 
    overflow: hidden; 
}

источник

2016-06-06 00:58:20 Midas

это исправить выравнивание, но разделить эти две частей (см обновленного кода здесь: https: // jsfiddle .net/klebermo/ch6gtj3p/1 /) –

Вы можете исправить это, указав '

' цвет фона. – Midas

и о размещении предметов по горизонтали, а по вертикали, как сейчас? –

Я только что удалили дисплей: блок для заголовка Li а и она выглядит выровнены.

codepen URL для ссылки

http://codepen.io/nagasai/pen/vKOwxQ

   header li a { 

      color: white; 
      text-align: center; 
      padding: 14px 16px; 
      text-decoration: none; 
      font-family: 'Oxygen Mono'; 
     }

Надеется, что это полезен для вас

источник

2016-06-06 01:15:00

Выравнивание элементов из навигационной панели

ответ

Смежные вопросы