CODEWITHSUNDEEP
htmlcss
John 'Mark' Smith
John 'Mark' Smith

Reputation: 2614

<ul> is wider than list items

I have a horizontal list with 4 list items. I want to achieve the simple task of having the <ul> no wider than the cumulative width of the <li>s Right now my <ul> is wider. In Firefox's code inspector it looks like:

enter image description here

Here is the HTML:

<div id="content-container">
   <div id="tabs">
      <ul>
         <li>Publications</li><li>URLs</li><li>Global Folders</li><li>Private Folders</li>
      </ul>
   </div>
</div>

CSS:

#content-container
{
    width: 65%;
    float: right;
    background-color: Red;
}

#tabs
{
    width: 100%;
    text-align: left;
    margin: 10px 0 0 10px;
}

#tabs ul
{
    width: 100%;
    list-style: none;
    text-align: left;
}

#tabs ul li
{
    display: inline;
    background-color: #3E93CF;
    font-size: 24px;
    font-weight: bold;
    padding: 7px 10px 7px 10px;
    font-family: "Segoe UI",Verdana,Helvetica,Sans-Serif;
    color: #FFF;
    border-left: 1px solid #FFF;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
}

#tabs ul li:last-child
{
    border: 1px solid #FFF;
}

EDIT:

Having added display: inline-block like:

tabs ul

{ width: 100%; list-style: none; text-align: left; display: inline-block; }

I now get this:

enter image description here

Upvotes: 2

Views: 3642

Answers (3)

Binita Lama
Binita Lama

Reputation: 1278

Working Fiddle

#tabs ul{
width: 100%;
list-style: none;
display:inline-block;
text-align:left;
padding:0;
}

Upvotes: 1

tpbapp
tpbapp

Reputation: 2506

The browser automatically adds padding to the left of the list. This creates the default space for the bullet points. You need to set padding to zero:

#tabs ul {
    padding: 0;
    width: 100%;
    list-style: none;
    text-align: left;
    display: inline-block;
}

Upvotes: 7

Colin Bacon
Colin Bacon

Reputation: 15619

ul is a block level element and will therefore take up all available space. Try using inline-block instead.

#tabs ul {
    display: inline-block;
}

Upvotes: 2

Related Questions