CSS - Как получить переменную ширину <LI>в моем вертикальном навигационном меню <UL> - PullRequest
Новая
       96

CSS - Как получить переменную ширину <LI>в моем вертикальном навигационном меню <UL>

0 голосов
/ 05 мая 2020

У меня есть вертикальное меню навигации <UL> с каждым <LI> до самого широкого элемента.

https://i.stack.imgur.com/1satJ.png

Как я могу использовать CSS, чтобы изменить размер каждого <LI>, чтобы он был настолько широк, насколько это необходимо, при сохранении ориентации по вертикали ?

Я пробовал .main-navigation li {display: inline-block;} и .main-navigation li {float: left;}, но они оба повернули мое меню по горизонтали, чего я не хочу.

Мой <UL> называется .main-navigation ul, если это помогает. Заранее благодарим за любую помощь!

1 Ответ

0 голосов
/ 05 мая 2020

Лучше применять стили к элементам внутри LI, а не к самому LI. 

.main-navigation ul{
  list-style: none
}

.main-navigation li{
  display: block;
  padding: 10px 0;
  text-align: center
}

.main-navigation a{
  text-decoration: none;
  display:inline
}

.main-navigation a:hover{
  border-bottom: 1px solid #f00
}
<html>
<head>

</head>
<body>
<div class="main-navigation">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Long Link</a></li>
<li><a href="#">Even longer Navigation Link</a></li>
</ul>
</div>
</body>
</html>
...