CODEWITHSUNDEEP
csslist
jbk
jbk

Reputation: 361

Make <li> fit the width of the <ul> using CSS

I'm trying to make the <li> fit the width of the <ul> but even with width:auto it doesn't work at all, and I don't know why. I tried to use display:inline-block but this is the same. I don't know how many tabs I will have so this is why I am not using a percentage directly.

I would like to display the list inline when I display the page on a desktop and display one li per line when I am on a smartphone (with media queries).

I have this:

<ul id='menu'>
    <li class="button"><a class='current' href='http://'>Home</a></li>
    <li class="button"><a href='http://'>Products</a></li>
    <li class="button"><a href='http://'>Support</a></li>
    <li class="button"><a href='http://'>Contact</a></li>
    <li class="button"><a href='http://'>Contact</a></li>
</ul>

and my CSS looks like this:

ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
/*border-bottom:1px solid #000000;
border-top:1px solid #000000;*/
}

li.button {
background:transparent url(../images/nav_bg.png) repeat-x top left;
height:30px;
width:auto;
}



ul#menu li
{
display:inline-block;
margin:0;
padding:0;
width:auto;
}

ul#menu li a
{
display:inline-block;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
width:auto;
}

ul#menu li a:hover
{   
color:#FFFFFF;
height:22px;
background:transparent url(../images/nav_bg.png) 0px -30px no-repeat;       
}


ul#menu li a.current
{
display:inline-block;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;  
margin:0;
}

Upvotes: 34

Views: 96624

Answers (7)

cloned
cloned

Reputation: 6742

Wow stumbled upon a very old question here.

For anyone also seeing this and scrolling down here, in 2022 this is easily doable via flexbox.

#menu {
  display: flex;
  gap: 1rem;
}

li {
  list-style-type: none;
}
<ul id='menu'>
  <li class="button"><a class='current' href='http://'>Home</a></li>
  <li class="button"><a href='http://'>Products</a></li>
  <li class="button"><a href='http://'>Support</a></li>
  <li class="button"><a href='http://'>Contact</a></li>
  <li class="button"><a href='http://'>Contact</a></li>
</ul>

Upvotes: 0

Adrian
Adrian

Reputation: 1

#menu {
  padding: 0;
  margin: 0;
  border: 1px solid red;
  position: absolute;
}

#menu li {
  list-style-type: none;
  float: left;
  position: relative;
  padding-right: 10px;
}

#menu li a {
  text-decoration: none;
}

<ul id="menu">
  <li><a href="index.html">1A1CASĂ </a></li>
  <li><a href="html-css.html">H1TML-CSS </a></li>
  <li><a href="javascript.html">J1VASCRIPT </a></li>
  <li><a href="php.html">PHP </a></li>
  <li><a href="teste.html">TESTE </a></li>
  <li><a href="constact.html">CONTACT </a></li>
</ul>

Upvotes: 0

Nikit Barochiya
Nikit Barochiya

Reputation: 1091

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            body{
                margin:0 auto;
            }
            .main{
                width:650px;
                border:1px solid red;
                padding:5px;
            }
            ul {
            padding:0;
            margin:0;
            width: 100%;
            border-bottom: 0;
            }
            li{
                display: table-cell;
                width: 1%;
                float: none;
                border:1px solid green;
                margin:2px;
                padding:10px;
                text-align:center;
            }
        </style>
    </head>
    <body>
       <div class="main">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
       </div>
    </body>
</html>

Upvotes: 0

Chionsas
Chionsas

Reputation: 871

I've found this way to deal with single-line full-width ul where an undefined number of li elements need to be spaced out evenly:

ul {
  width: 100%;
  display: table;
  table-layout: fixed; /* optional */
}

ul li {
  display: table-cell;
  width: auto;
  text-align: center;
}

Basically, it emulates a table. Works in Gecko, Webkit, IE8+. For IE7 and downwards you should use some inline-block hackery :)

JSFiddle

Upvotes: 87

w3uiguru
w3uiguru

Reputation: 5895

try below css:

style.css (line 87)

ul#menu li {
    float: left;
    margin: 0;
    padding: 6px 0;
    width: 11.1%;
}

style.css (line 113) 

ul#menu li a.current {
    background: url("images/nav_bg.png") no-repeat scroll 0 -30px transparent;
    height: 22px;
    margin: 0;
}

style.css (line 95)

ul#menu li a {
    color: #999999;

    font-weight: bold;
    padding: 8px 20px 0;
    text-decoration: none;
    width: auto;
}

see screen shot:

enter image description here

Upvotes: -2

jello
jello

Reputation: 151

Since the li count can change, I can only think of accomplishing this with javascript/jquery as you suggested. Just divide 100 by the # of li's and set the width on each one.

var width = Math.floor(100 / $("ul#menu li").size());
$("ul#menu li").css('width', width + "%");

You will probably have to play with the width depending on padding and what not.

As a side note, If you haven't already, I recommend getting a tool like firebug, which will let you edit css and execute js on the fly. It is infinitely useful for fine tuning appearances.

Upvotes: 3

Mr Lister
Mr Lister

Reputation: 46549

If you want to fill the width of the <ul> with the five <li>s, you will have to give those <li>s a width of 20% each.
Note that you need to change some other details of the CSS if you want to make this work; e.g. with a display:inline-block you make the spaces between the <li> count, so the total width of the <ul> content will be more than 100% wide. I'd suggest removing the display:inline-block and giving them float:left.

Edit: Or do you want them to be distributed proportionally according to their contents? That would be a different challenge.

Upvotes: 1

Related Questions