填充到列表项？

Question

Trying to make a small navigation here. jsfiddle below.

http://jsfiddle.net/s3king93/yjKdR/

Is there any way to add padding to the link items without having the text get larger or move?

I'd like it to ideal look like this http://i.imgur.com/0zDt0vR.png

Any ideas?

HTML

<div class="list-1">
    <ul class="list-style-1">
        <li><a href="">HOME</a></li>
        <li><a href="">INFLUENCES</a></li>
        <li><a href="">ABOUT ME</a></li>
        <li><a href="">CLASSES</a></li>
        <li><a href="">ANDREWS VIDEO BLOG</a></li>
        <li><a href="">PHOTOGRAPHY</a></li>
    </ul>
</div>

CSS

.list-1 {
    padding:none;
    float: right;
    clear:right;
    padding-right: 27px;
}

.list-style-1 {
    padding-top: 26px;
    list-style-type: none;
    font-family: "Bell Gothic Std Light";
    font-size: 20px;
}

a:link {
    text-decoration:none;
    color: #2A2A2A;
}

a:visited {
    text-decoration:none;
    color: #2A2A2A;
}

a:hover {
    text-decoration:none;
    color: #69E0F6;
    background-color: #2A2A2A;
    padding-left: 5px;
    padding-right: 70px;
}

a:active {
    text-decoration:none;
    color: #69E0F6;
    background-color: #2A2A2A
}

Answer 1

<ul> is already a block-element by default so you don't need a div around it.

Plus, on a:hover you have padding-right set to 70px . That's why your list is moving when you're hovering. I don't understand though why you have that padding on hover. If you remove the paddings on hover your list will remain where it is.

Is this what you want?

Answer 2

You're putting on the padding when you hover over the links, and that extra padding is making the link go past the end of the DIV. FOr this reason, the browser pushes it back so it all fits in the DIV.

You should assign it before hover (on a:link instead of a:hover), and the link won't move.

This CSS should do what you want:

.list-1 {
    padding:none;
    float: right;
    clear:right;


}


.list-style-1 {
    padding-top: 26px;
    list-style-type: none;
    font-family: "Bell Gothic Std Light";
    font-size: 20px;
}


a:link {
    text-decoration:none;
    color: #2A2A2A;
    padding-right: 70px;
    padding-left: 5px;
}

 a:visited {
    text-decoration:none;
    color: #2A2A2A;
}

a:hover {
    text-decoration:none;
    color: #69E0F6;
    background-color: #2A2A2A;
}

a:active {
    text-decoration:none;
    color: #69E0F6;
    background-color: #2A2A2A
}

See it working here:

http://jsfiddle.net/yjKdR/4/

Answer 3

You need to keep the padding consistent when hovered.

Move the padding from a:hover to a:link . I'd also suggest qualifying those styles so they don't apply to every link on the page:

.list-style-1 a:link {
  text-decoration:none;
  color: #2A2A2A;
  padding-left: 5px;
  padding-right: 70px;
}

.list-style-1 a:visited {
  text-decoration:none;
  color: #2A2A2A;
}

.list-style-1 a:hover {
  text-decoration:none;
  color: #69E0F6;
  background-color: #2A2A2A;
}

Answer 4

Remove the padding properties and set the a tag to display block.

.list-1 {
    padding:none;
    float: right;
    clear:right;
 }

.list-style-1 a{
    width:100%;
    display:block;
}

jsFiddle