1

Добрый вечер, подскажите пожалуйста, что не так в коде, если на выходе получается вот такая вещь: (Хочу сделать только верхнюю и нижнюю границы у меню, но обе почему-то оказываются над ним.)

.menu { border-top:3px solid red; border-bottom:3px solid red; }
.menu ul {list-style:none; text-align:center;}
.menu li {float:left; padding:10px;}

2 ответа 2

2

Не хватает clearfix. Простейший вариант - добавить overflow: hidden на ul.

.menu { border-top:3px solid red; border-bottom:3px solid red; }
.menu ul {list-style:none; text-align:center; overflow:hidden;}
.menu li {float:left; padding:10px;}
<nav class="menu">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
  </ul>
</nav>

0

Пример:

.menu { border-top:3px solid red; 
border-bottom:3px solid red; width:100%;display:inline-block; }

.menu ul {list-style:none; text-align:center;}
.menu li {float:left; padding:10px;}
<div class="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
  
</div>

4
  • Текст ответа противоречит коду.
    – Qwertiy
    23 мар 2017 в 14:32
  • спс за оперативный минус! а что в тексте ? что противоречит ? border установлен же для класса .menu и так как нет 'высоты' для блока, то бордеры выходят над ним,
    – Arsen
    23 мар 2017 в 14:37
  • Минус был не мой. Противоречие в том, что "блочный показ" - это не display:inline-block;. Однако, код в ответе верный - держи плюс, будет нолик.
    – Qwertiy
    23 мар 2017 в 14:39
  • 1. Всё-таки текст поправь. 2. Код можно внести в сам ответ в виде сниппета.
    – Qwertiy
    23 мар 2017 в 14:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.