Cant change <li> vertical position inside nav bar without affecting nav bar's size
Question
So I try to change li's vertical position but when I do the nav bar height is affected as well. What is the way to actually do that without affecting nav bar's height?
Here's the code:
body { margin: 0px; } ul { margin: 0px; padding: 0px; list-style: none; padding-left: 5px; padding-top: 10px; background-color: #333; overflow: hidden; } li { float: left; height: 30px; width: 100px; background-color: grey; color: white; margin-right: 4px; text-align: center; line-height: 30px; font-weight: bold; font-size: 15px; } li a { text-decoration: none; color: white; display: block; } ul li:hover { opacity: 0.8; }
<ul> <li><a href="kalli.html">Home</a></li> <li><a href="mp.html">My Profile</a></li> <li><a href="set.html">Settings</a></li> </ul>
2 answers
solution1
0 ACCPTED 2017-09-28 14:16:51
What is your goal here? To have the content centered or...?
It may be better to use flexbox here rather than set the padding-left: 850px; on your ul (also on your ul you could've used display: block; margin: 0 auto; to center it.) If you'd like, you can give your ul a defined height and use align-items to specify how it should be aligned vertically.
body { margin: 0; } nav { background-color: #333; display: flex; justify-content: center; } nav ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; height: 50px; align-items: center; } li { height: 30px; width: 100px; background-color: grey; color: white; margin-right: 4px; text-align: center; line-height: 30px; font-weight: bold; font-size: 15px; } li a { text-decoration: none; color: white; display: block; } ul li:hover { opacity: 0.8; }
<body> <nav> <ul> <li><a href="kalli.html">Home</a></li> <li><a href="mp.html">My Profile</a></li> <li><a href="set.html">Settings</a></li> </ul> </nav> </body>
solution2
0 2017-09-28 14:55:44
You can add position: relative; and a value for bottom or top - in my snippet bottom: 4px; :
This reserves the space originally taken by the element (without position: relative; ), but moves the element according to the top/bottom/left/right settings, without affecting other elements.
body { margin: 0px; } ul { margin: 0px; padding: 0px; list-style: none; padding-left: 5px; padding-top: 10px; background-color: #333; overflow: hidden; } li { float: left; height: 30px; width: 100px; background-color: grey; color: white; margin-right: 4px; text-align: center; line-height: 30px; font-weight: bold; font-size: 15px; position: relative; bottom: 4px; } li a { text-decoration: none; color: white; display: block; } ul li:hover { opacity: 0.8; }
<ul> <li><a href="kalli.html">Home</a></li> <li><a href="mp.html">My Profile</a></li> <li><a href="set.html">Settings</a></li> </ul>
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.