3

Пытаюсь сделать меню с помощью LI и отцентрировать текст ссылок. И чтобы отступов между ссылками не было. Но, к сожалению, ничего не выходит: текст не выравнивается по вертикали, и отступы между элементами сохранились.

ul.menu {
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  background-color: #333; 
  height: 100px;
}

ul.menu li {
  display: inline-block;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 75px;
  background-color: red;
  text-align: center;
}
<div style="width:100%">
  <ul class="menu">
    <li><a>some</a></li>
    <li><a>some</a></li>
    <li><a>some</a></li>
  </ul>
</div>

Что тут сделано не верно. Помогите пожалуйста

1
  • для LI добавил "line-height:100px" но не работате line-height:100%, получается как-то не адаптивно... есть более правильный вариант? 5 сен 2016 в 19:08

3 ответа 3

2

1. inline-block

1) Если высота меню 100px, то однострочные пункты можно отцентрировать по вертикали с помощью line-height: 100px;.

2) Инлайн-блоки ведут себя как слова в предложении: оставленные между ними пробелы и переводы строки превращаются в лишние просветы. На английском СО собраны способы борьбы с этой напастью.

ul.menu {
  background-color: #333; 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
}

ul.menu li {
  background-color: red;
  display: inline-block;
  line-height: 100px;
  text-align: center;
  width: 75px;
}
<div style="width:100%">
  <ul class="menu">
    <li><a href="#">some</a></li><!--
 --><li><a href="#">some</a></li><!--
 --><li><a href="#">some</a></li>
  </ul>
</div>

2. table-cell

Можно заставить пункты меню вести себя так, будто они ячейки таблицы:

ul.menu {
  background-color: #333; 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
}

ul.menu li {
  background-color: red;
  display: table-cell;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  width: 75px;
}
<div style="width:100%">
  <ul class="menu">
    <li><a href="#">some</a></li>
    <li><a href="#">some</a></li>
    <li><a href="#">some</a></li>
  </ul>
</div>

1
  • 1
    @simplygood Добавил исправленное решение через инлайн-блоки. 6 сен 2016 в 3:43
2

Как вариант:

ul.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
ul.menu li {
  float: left;
}
ul.menu a {
  display: block;
  width: 75px;
  height: 100px;
  background: red;
  text-align: center;
  text-decoration: none;
  line-height: 100px;
  color: #fff;
}
ul.menu a:hover {
  background: silver;
  color: #000;
}
<ul class="menu">
  <li><a href="#">some1</a>
  </li>
  <li><a href="#">some2</a>
  </li>
  <li><a href="#">some3</a>
  </li>
</ul>

1

Могу предложить вам воспользоваться flex.

ul.menu { 
  list-style-type: none; 
  padding: 0;
  background-color: #333; 
  height:100px;
  display: flex;
}

ul.menu li{
  display: flex;
  align-items: center;
  justify-content: center;
  height:100%;
  width:75px;
  background-color:red;
}
<div style="width:100%">
  <ul class="menu">
    <li><a>some</a></li>
    <li><a>some</a></li>
    <li><a>some</a></li>
  </ul>
</div>

1
  • С flex ведет себя (по мойму) как обычный div, без всяких выравниваний, в итоге воспользовался line-height:100px; и писал теги без переноса на новую строку 6 сен 2016 в 20:36

Ваш ответ

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

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