Reputation: 33
When I list a set of links, they go left to right on my web page. I want them to be stacked instead, so going from top to bottom. What do I need to add to do that?
Here is my HTML:
<div id="Links" style="width:650px; background-color: #dcdcdc; border: #00008b 2px dashed;">
<a href="index.html">Index Page</a>
<a href="pagetwo.html">Schedule Page</a>
<a href="pagethree.html">To Top</a>
</div>
Upvotes: 1
Views: 46
Reputation: 23280
The quick way;
#Links {
width:650px;
background-color: #dcdcdc;
border: #00008b 2px dashed;
}
#Links > a {
display: block;
}
<div id="Links">
<a href="index.html">Index Page</a>
<a href="pagetwo.html">Schedule Page</a>
<a href="pagethree.html">To Top</a>
</div>
The semantically correct way;
#Links {
list-style-type: none;
width:650px;
background-color: #dcdcdc;
border: #00008b 2px dashed;
}
#Links > a {
display: list-item;
}
<nav id="Links">
<a href="index.html">Index Page</a>
<a href="pagetwo.html">Schedule Page</a>
<a href="pagethree.html">To Top</a>
</nav>
Cheers!
Upvotes: 1
Reputation: 1635
Add this style to the links it will take the full width vertically. style="display :block;"
<div id="Links" style="width:650px; background-color: #dcdcdc; border: #00008b 2px dashed;">
<a href="index.html" style="display:block">Index Page</a>
<a href="pagetwo.html" style="display:block" >Schedule Page</a>
<a href="pagethree.html" style="display:block" >To Top</a>
</div>
Upvotes: 1
Reputation: 10601
The a
tag belongs to the inline elements. With the css rule display:block
you can let them behave like block elements.
#Links a {
display: block;
}
<div id="Links" style="width:650px; background-color: #dcdcdc; border: #00008b 2px dashed;">
<a href="index.html">Index Page</a>
<a href="pagetwo.html">Schedule Page</a>
<a href="pagethree.html">To Top</a>
</div>
Upvotes: 0