CSS - How to get variable width <LI> in my Vertical Nav Menu <UL>
Question
I have a vertical navigation menu <UL> with every <LI> as long as the widest element.
https://i.stack.imgur.com/1satJ.png
How can I use CSS to resize each <LI> to only be as wide as necessary, while maintaining the vertical orientation?
I've tried .main-navigation li {display: inline-block;} and .main-navigation li {float: left;} but they both turned my menu horizontal which I don't want.
My <UL> is called .main-navigation ul if that helps. Thanks in advance for any assistance!
1 answers
solution1
-1 ACCPTED 2020-05-05 07:30:42
Better apply styles to the elements inside the LI, not the LI itself.
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.