Horizontally align UL items within parent div with no space on either side?

Question

I'm making a navigation menu and have run into the common problem of needing to horizontally align a UL with equal spacing around each list item. However, this list is inside of a div set to a width of 1100px and I need there to be no space on the left or right-hand sides of the div -- the first and last list items need to reach their side of the div.

Here's the unordered list as I have it right now:

ul{
            width:100%;
            display:table;
            list-style-type:none;
            padding:0;
            border-spacing:5px;
            li{
                display:table-cell;
                padding:0 30px;
            }
        }

And as I said, this unordered list is inside of another div which has its width set to 1100px. What should I do to make the list stretch the full width of the div?

Is this the way you are set up? http://jsfiddle.net/abhitalks/q4peetcj/ I assume you want first and last items to flush against the div? — Abhitalks, Dec 02 '14 at 06:47
Yes, was about to share this: http://jsfiddle.net/9k211ppj/1/ — Tom Maxwell, Dec 02 '14 at 06:49
I want them flush against the div with no extra spacing on left or right side, yes @abhitalks — Tom Maxwell, Dec 02 '14 at 06:49
They are already flushed. See the red borders, they are already stretching to the end of blue div. — Abhitalks, Dec 02 '14 at 06:50
If you remove the padding on first and last items, then it will be unbalanced. — Abhitalks, Dec 02 '14 at 06:51
@abhitalks as I'm sure you can see the text of the first and last list items do not reach flush with the div, which is what I'm trying to solve — Tom Maxwell, Dec 02 '14 at 06:52
I'm assuming this probably just isn't possible with table cells — Tom Maxwell, Dec 02 '14 at 06:52
Here: http://jsfiddle.net/abhitalks/q4peetcj/2/ But, as I said, they are now unbalanced. — Abhitalks, Dec 02 '14 at 06:53
Or you could remove the padding altogether and go with `text-align`: http://jsfiddle.net/abhitalks/q4peetcj/3/ — Abhitalks, Dec 02 '14 at 07:04
@TomMaxwell Is [this](http://stackoverflow.com/a/17951253/703717) the effect you're for? — Danield, Dec 02 '14 at 07:16

score 1 · Accepted Answer · answered Dec 02 '14 at 07:34

1) Set text-align:justify on the container

2) Use a pseudo element to stretch the list items to 100% of the width of the list

FIDDLE

ul {
  width: 800px;
  text-align: justify;
  list-style-type: none;
  padding: 0;
  background: yellow;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}
li {
  display: inline-block;
  padding: 0 30px;
  text-align: center;
  background: tomato;
}

<div id="explore-nav">
  <ul>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
  </ul>
</div>

Weafs.py · Answer 2 · 2014-12-02T06:50:16.247

Guessing your markup look something like this.

ul {
  width: 100%;
  display: table;
  list-style-type: none;
  padding: 0;
  border-spacing: 5px;
  border: 1px solid black;
}
li {
  display: table-cell;
  padding: 0 30px;
  text-align: center;
  background-color: #EDEDED;
  border: 1px solid black;
}
#container {
  width: 1100px;
  margin: 0 auto;
}

<div id="container">
  <ul>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
  </ul>
</div>

Horizontally align UL items within parent div with no space on either side?

2 Answers2