Spacing in Navigation Menu (HTML/CSS)
Question
.body-color {
background: rgb(27,39,57)
}
a {
text-decoration: none;
color: red;
padding-right: 20px;
}
li {
display: inline-block;
padding-right: 30px;
}
#menu {
text-align: center;
background-color: white;
padding-bottom: 100px;
}
I have tried to padding/margins in both the anchor and li but nothing happens.
How do I add spacing in between each menu option?
My HTML, am I assigning it to the wrong place?:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
<title>My Website</title>
</head>
<body class="body-color">
<h1 class="logo"><h1>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portrait</a></li>
<li><a href="#">Product Showcase</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
7 answers
solution1
0 2018-03-28 17:53:02
Assuming you aren't targetting edge or IE, display: flex is a better way of doing what you're doing.
#menu {
display:flex;
justify-content: space-between;
}
Would result in each list item being evenly spaced. For practicing basic css skills using flex, I would take a look at this website . They have a lot of great tutorials for basic flex usage.
solution2
0 2018-03-28 18:08:30
Have you tried this? you don't have to give width but will manage equal width for each element.
ul {
width: 100%;
display: table;
table-layout: fixed; /* the magic dust that ensures equal width */
background: #ccc
}
ul > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
ul > li > a {
display:block;
padding:50px;
}
solution3
0 2018-03-28 18:11:23
Answer Solved. Followed
.body-color { background: rgb(27,39,57) } #menu { text-align: center; background-color: white; padding-bottom: 100px; margin-left: 0; padding-left: 0; } li { display: inline-block; padding-left: 15px; padding-right: 15px; } a { text-decoration: none; color: red; }
<ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Portrait</a></li> <li><a href="#">Product</a></li> <li><a href="#">Showcase</a></li> <li><a href="#">Contact</a></li> </ul>
solution4
0 2018-03-28 19:23:10
.body-color { background: rgb(27,39,57) } a { text-decoration: none; transition: .3s; } #menu { text-align: center; background-color: white; padding-bottom: 100px; } #menu ul li { display: inline-block; } #menu ul li + li { margin-left: 30px; } #menu ul li a { color: #000; } #menu ul li a:hover { color: #f10; }
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/reset.css"> <title>My Website</title> </head> <body class="body-color"> <h1 class="logo"></h1> <div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portrait</a></li> <li><a href="#">Product Showcase</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html>
solution5
0 2018-03-28 20:07:05
If it doesn't need to support IE 9 or lower. I recommand flex:
* { margin: 0; padding: 0; } #menu { position: relative; display: flex; justify-content: space-evenly; /* 'space-around' for just filled space */ width: 100%; /* list nav normalization */ list-style: none; margin: 0; padding: 0; /* Additional Options */ align-items: center; align-content: center; /* For clarity in this example, remove this when your done */ background-color: rgba(0,0,0,.1); } #menu li { display: inherit; /* For clarity in this example, remove this when your done */ background-color: rgba(0,0,0,.1); } #menu a { padding: 10px; text-decoration: none; color: red; /* For clarity in this example, remove this when your done */ background-color: rgba(0,0,0,.1); }
<nav id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Portrait</a></li> <li><a href="#">Product Showcase</a></li> <li><a href="#">Contact</a></li> </nav>
solution6
-1 2018-03-28 17:51:11
I think that adding display: inline-block; to the menu item might work.
solution7
-1 2018-03-28 17:53:33
Check this link, you can add padding to any direction.
https://codepen.io/jackstride/pen/JLpPgZ
li a { padding: 50px;
}
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.