Padding right issue

Question

I'm trying to achieve responsive design on a website. The issue I'm having is that I want the navigation menu to fit 100% to the total width, and there is some kind of right padding on the last element ("Equipo") that I want to remove, so the element gets to the border. How can I achieve that?

HTML:

<header class="mainHeader">
    <nav><ul>
        <li><a href="#" class="menuActual">Inicio</a></li>
        <li><a href="#">Obras</a></li>
        <li><a href="#">Personas</a></li>
        <li><a href="#">Búsqueda Avanzada</a></li>
        <li><a href="#">Equipo</a></li>
    </ul></nav>
</header>

CSS:

.mainHeader nav {
width: 100%;
height: 30px;
margin: 1% 0;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
width: 100%;
}
.mainHeader nav ul li {
float: left;
display: inline;
width: 20%;
}
ul {
padding-left: 0;
}
.mainHeader nav ul li a:link, .mainHeader nav a:visited {
width: 80%;
height: 22px;
display: inline-block;
padding: 4px 0;
text-align: center;
color:#FFFFFF;
background-color:#2e2e2e;
border-left:5px solid #2e2e2e;
}

Here's the link of the temporary web file: http://basevideoarte.com.ar/juan/responsivetemp/index.htm Thanks a lot!

You could try the `last-child` selector, and remove the padding from the last element. `li { padding-right: 10px;} li:last-child {padding-right: 0}` — Marc B, Jan 09 '14 at 20:01
Didn't work. I've also put !important after both padding-right. — DaNoiseMan, Jan 09 '14 at 20:10

bboysupaman · Accepted Answer · 2014-01-09T20:13:41.747

1

Try this:

a {
width: 100%;
}

li {
width: 16%;
padding-right: 4%;
}

li:last-child {
padding-right: 0px;
}

I didn't look if you had additional margins or padding in there, but if so, adjust to accommodate those and this will solve you issue.

edited Jan 09 '14 at 20:13

answered Jan 09 '14 at 20:03

bboysupaman

1,274
1
13
20

The problem is not the padding on the li element. There isn't any padding at all. – Anthony Weber Jan 09 '14 at 20:07
Thanks for the code! Here is the problem: The a element is defining your width. Set the a element to 100% width and set the list element to 16% width with a 4% padding-right and a li:last-child with a padding-right of 0px. I'll edit my answer with accurate code. – bboysupaman Jan 09 '14 at 20:10
@AnthonyWeber that's why I said "kind of", didn't knew what where making that space. – DaNoiseMan Jan 09 '14 at 20:15
@DaNoiseMan Yes, but the first version of this answer was just about removing a non-existent padding. Now it's a better solution :) – Anthony Weber Jan 09 '14 at 20:18
@JesseSupamanNichols that worked, but instead of set a 4% padding-right at the css file, I set it on the first four li elements. Thanks! – DaNoiseMan Jan 09 '14 at 20:28
Awesome! That will work just fine to and and inline-styling is better for earlier browser support. – bboysupaman Jan 09 '14 at 20:34

score 0 · Answer 2 · answered Jan 09 '14 at 20:04

0

If you align the last item to the right, the spaces wont be equal anymore. So use .mainHeader nav ul li{text-align:center;} to align them equal

answered Jan 09 '14 at 20:04

n1kkou

3,096
2
21
32

score 0 · Answer 3 · edited May 23 '17 at 12:21

You have your <li> list items lined up side by side, and the <a> links (which have the gray background) are set to 80% width of their parent <li>. The links are left-aligned, so you see a gap present on the last one, just like the others, equal to 20% of the list item's width.

[Edit:]

Here's a fiddle demonstrating how to space the <li>'s out to match the header width, centered for margins on either side. I've illustrated a demo of what's happening in your layout, where the links are only taking up a portion of the list items to simulate space between the links, and I've illustrated how I'd fix that by spacing the list items individually.

Hope this clears it up a little more. Inline styles, as recommended in other answers, are usually a bad idea. Best to keep things simple, and flexible.

You're right, if I put the links to 100% there's no space. Still not having a clue about how to fix it. — DaNoiseMan, Jan 09 '14 at 20:18
I've added a fiddle to illustrate how I'd fix the issue, avoiding inline styles and pseudo-selectors. Hope this helps, good luck! — Dpeif, Jan 10 '14 at 20:01

score 0 · Answer 4 · answered Jan 09 '14 at 20:30

0

This seems to work:

.mainHeader nav ul li {
float: left;
width: 16%;
margin-right: 5%;
}

.mainHeader nav ul li a {
width: 100%;
}

.mainHeader nav ul li:last-child {
float: right;
margin: 0;
}

answered Jan 09 '14 at 20:30

seedy

91
7

score 0 · Answer 5 · answered Jan 09 '14 at 20:41

Just a different perspective.

Using ul/li for nav menus raises issues of "fitting" the ul/lis inside a div. You can "fit" them many different ways. Left padding, right padding, changing the width of the holder div (then centering the div), and I'm sure there are many others.

In THIS fiddle, I've just changed the padding on the left and it will "center" the ul/li in the div (I've added borders so it's easier to see).

I've only changed this CSS:

ul {
padding-left: 23px;
}

and added a border around the holder div.

Not better than any other approach, just different.

Padding right issue

5 Answers5