Check this one :-
Update this :-
.navigation ul {
text-align: center;
width: 100%;
list-style-type: none;
padding: 0;
margin: 0;
}
Вопрос
So I am having this problem, I am trying to make a simple navigation bar where the LI
body {
margin: 0px;
font-family: Tahoma;
font-size: 12pt;
}
a {
color: #3D91EB;
text-decoration:none
}
a:link {
color: #3D91EB;
}
a:visited {
color: #3D91EB;
}
a:active {
color: #2C82DE;
}
.navigation {
height: 30px;
background-color: #383838;
color: whiteSmoke;
list-style-type:none;
padding: 5px;
}
.navigation ul {
text-align: center;
width: 100%;
list-style-type: none;
}
li {
display: inline;
}
.container {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
background-color: #9C9C9C;
height: 500px;
width: 600px;
padding: 10px;
}
and here is my HTML
<div class="navigation">
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
<div class="container" style="">
Testasdf
</div>
If anyone could please help me fix my issue, that would be great!
Решение
Check this one :-
Update this :-
.navigation ul {
text-align: center;
width: 100%;
list-style-type: none;
padding: 0;
margin: 0;
}
Другие советы
Yeah it's because unordered lists automatically have CSS padding and margins on them. You have to clear them first:
ul {
margin: 0px;
padding: 0px;
}