CODEWITHSUNDEEP
csshtml-listsborder
SaturnsEye
SaturnsEye

Reputation: 6499

Is it possible to move border-bottom left or right in a list?

I have border-bottom on my li's but I have padding-left:10px on my ul so it nudges everything to the right by 10px.

I'm wondering if its possible to knock the border back over to the left? or is this not possible as the border is a part of the ul?

html

<ul class="menuoptions">
<li>Home</li>

<li>Firewalls</li>

<li>SSL VPN Encryption</li>

<li>Security In Education</li>

<li>Wireless Access Points</li>
</ul>

CSS

.menuoptions {
    position:relative;
    height:30px;
    width:225px;
    color:#666;
    line-height:40px;
    font-weight:bold;
    padding-left:10px;
    margin-top:-10px;
    top:10px;
    list-style:none;

}

.menuoptions li {
    border-bottom:solid 1px #ccc;       
}

Fiddle

Upvotes: 0

Views: 17036

Answers (2)

alou
alou

Reputation: 1502

It is a part of the ul, however you could use margin-left:10px instead of padding (as long as it is a block element) and remove that part of the border.

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128781

You're applying this padding to your ul but not to the li elements. Firstly you need to reset the padding of the ul to 0 (as most browsers apply padding-left to the ul element by default):

.menuoptions {
    ...
    padding: 0;
}

Then give the padding-left to your li elements:

.menuoptions li {
    ...
    padding-left: 10px; 
}

Working JSFiddle demo.

Upvotes: 5

Related Questions