CODEWITHSUNDEEP
htmlcss
Steven
Steven

Reputation: 18859

Aligning and styling text inside anchor tag

I have a list of links that I want to stack one on top of the other for navigation structure. Here's my HTML:

<nav>
  <ul>
    <li><a href="#"><span class="code">1</span><span class="name">One</span></a></li>
    <li><a href="#"><span class="code">2</span><span class="name">Two</span></a></li>
    <li><a href="#"><span class="code">3</span><span class="name">Three</span></a></li>
  </ul>
</nav>

Each list item should be a square, and they should all align vertically. The text inside each square should have the number (1) in large font with the name (one) directly below it.

But for some reason the name is being pushed way below, into the next anchor tag.

You can see what I have here: http://jsfiddle.net/pmb6pqea/

Anyone know how I can fix this issue?

Upvotes: 0

Views: 2549

Answers (2)

user4233921
user4233921

Reputation:

You just need to remove line-height from your li styling.

http://jsfiddle.net/pmb6pqea/4/

Upvotes: 3

ET-CS
ET-CS

Reputation: 7160

The problem is that you have set 'line-height' for the li tag. remember, line-height will affect all lines inside that container, and not the container height.. so when you've added it - each line inside of the two you have (code, name) are pushed down.

So, I removed the line-height. I've also removed the height:100% from the .code so the .name will pulled closer to it, and set padding-top for the .code to push both to center.

nav {
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  position: fixed;
  width: 150px;
  color: #000000;
  border-right: solid 2px #000000;
  background-color: #FFFFFF;
}
nav ul,
nav ul li {
  margin: 0;
  padding: 0;
}
nav ul li {
  height: 150px;
  border-bottom: solid 2px #000000;
}
nav ul li a:link,
nav ul li a:hover,
nav ul li a:visited {
  display: block;
  color: #000000;
  text-decoration: none;
  width: 150px;
}
nav ul li a span.code {
  padding-top: 15px;
  display: inline-block;
  font-size: 72px;
  width: 100%;
  text-align: center;
}
nav ul li a span.name {
  display: inline-block;
  font-size: 20px;
  width: 100%;
  height: 40px;
  text-align: center;
}
<nav>
  <ul>
    <li><a href="#"><span class="code">1</span><span class="name">One</span></a>
    </li>
    <li><a href="#"><span class="code">2</span><span class="name">Two</span></a>
    </li>
    <li><a href="#"><span class="code">3</span><span class="name">Three</span></a>
    </li>
  </ul>
</nav>

Upvotes: 2

Related Questions