web-dev-qa-db-fra.com

Ajustez <li> à la largeur de <ul> en utilisant CSS

J'essaie de faire en sorte que le <li> corresponde à la largeur du <ul> mais même avec width:auto cela ne fonctionne pas du tout et je ne sais pas pourquoi. J'ai essayé d'utiliser display:inline-block mais c'est la même chose. Je ne sais pas combien d'onglets je vais avoir, c'est pourquoi je n'utilise pas directement un pourcentage.

Je souhaite afficher la liste en ligne lorsque j'affiche la page sur un bureau et une valeur li par ligne lorsque je suis sur un smartphone (avec des requêtes multimédia).

J'ai ceci:

<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>

et mon CSS ressemble à ceci:

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;
}
csslist
34
jbk

J'ai trouvé cette façon de traiter les lignes simples sur toute la largeur où un nombre indéfini d'éléments li doit être espacé régulièrement:

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

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

Fondamentalement, il émule une table. Fonctionne dans Gecko, Webkit, IE8 + . Pour IE7 et vers le bas, vous devriez utiliser du hackery inline-block

JSFiddle

84
Chionsas

Puisque le nombre de li peut changer, je ne peux que penser à y parvenir avec javascript/jquery comme vous l’avez suggéré. Il suffit de diviser 100 par le nombre de li et de définir la largeur de chacun.

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

Vous devrez probablement jouer avec la largeur en fonction du rembourrage ou non.

Si vous ne l’avez pas déjà fait, je vous recommande de vous procurer un outil tel que firebug , qui vous permettra d’éditer css et d’exécuter js à la volée. C'est infiniment utile pour peaufiner les apparences.

3
jello

Si vous voulez remplir la largeur du <ul> avec les cinq <li>s, vous devez attribuer à ces <li>s une largeur de 20% chacun.
Notez que vous devez modifier d’autres détails du CSS si vous voulez que cela fonctionne; par exemple. avec un display:inline-block vous faites les espaces entre le <li> compte, donc la largeur totale du contenu de <ul> sera plus de 100% large. Je suggère de supprimer le display:inline-block et de lui donner float:left.

Edit: Ou voulez-vous qu’ils soient distribués proportionnellement en fonction de leur contenu? Ce serait un défi différent.

1
Mr Lister
<!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>
0
Nikit Barochiya