Reputation: 2614
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:
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:
{ width: 100%; list-style: none; text-align: left; display: inline-block; }
I now get this:
Upvotes: 2
Views: 3642
Reputation: 1278
#tabs ul{
width: 100%;
list-style: none;
display:inline-block;
text-align:left;
padding:0;
}
Upvotes: 1
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
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