Jimmy Mac Jimmy Mac - 3 months ago 7
HTML Question

Why aren't my "<li>"s moving to the top when using margin-top

I am having a problem when using margin-top on

<li>
elements. I am trying to have my list align to the top of the page but my
li
element isn't moving to the top as it should:

<body>
<div class="main_header">
<h1>Title</h1>
<ul>
<li><a href="/about">About Me</a></li>
<li><a href="/Order">Order</a></li>
<li><a href="/Designs">Designs</a></li>
<li><a href="/Contact">Contact</a></li>
</ul>
</div>
</body>




Then here is my css

.main_header li a {
margin-top: -20px;
display: inline-block;
}


I hope someone can help me thank you.

Answer

If your looking for a inline navigation style ul change the css to:

.main_header li {
margin-top: -20px;
display: inline-block;
}

If your looking to move the whole list up try:

ul {
margin-top:-10px;
}

If your looking to move just the li elements closer to each other try:

.main_header li {
display: block;
}

Note - if your looking to have a inline navigation, use the <nav> html element instead to reduce styling, as it automatically places the links inline

Comments