CODEWITHSUNDEEP
html
Logan Strat
Logan Strat

Reputation: 33

Links should be going down, rather than going right

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

Answers (3)

Chris W.
Chris W.

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

Hitech Hitesh
Hitech Hitesh

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

tom
tom

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

Related Questions