web-dev-qa-db-fra.com

Centrer horizontalement/uniformément <li> à l'intérieur de <ul> à l'intérieur d'un <div>

Avoir un <div> Barre de navigation, à l'intérieur est un <ul> et chaque <li> contient un <a> avec un lien (c'est pour une barre de navigation)

J'ai regardé sur Google et ce site et je ne pouvais pas trouver exactement ce que je cherchais.

Ce que je veux, c'est pouvoir conserver mon style actuel (avec <li> avec <a> à l'intérieur) et je veux que le <li> soit uniformément réparti et centré (cette partie vient naturellement si elles sont uniformément réparties ...) dans le <ul> (qui est dans la barre de navigation <div>).

Quoi qu'il en soit, si cela n'a pas de sens, faites-le-moi savoir, pour le moment, ils sont simplement alignés ... Voici ce que j'ai:

HTML:

<div class="navbar">
  <ul>
    <li><a href="Home">Home</a></li>
    <li><a href="Discounts">Discounts</a></li>
    <li><a href="Contact">Contact Us</a></li>
    <li><a href="About">About Us</a></li>
  </ul>
</div>

CSS:

.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0px;
    padding: 0px;
    width: 90%;
    overflow: hidden;
}
.navbar li{
    float: left;
    padding: 2px;
    width: 150px;
    margin-left: auto ;
    margin-right: auto ;
}

Je peux aussi inclure mon .navbar un {} si cela est nécessaire . Je suis très nouveau en CSS, alors allez-y doucement, j'ai aussi regardé tout d'abord SO et Google et je ne pouvais rien trouver de la sorte ( Bien que peut-être depuis que je suis nouvelle, je ne réalise pas que c'est pareil).

S'il s'agit d'une méthode CSS défaillante et/ou s'il existe un moyen beaucoup plus simple et plus couramment utilisé. Allez-y et liez/postez cela à la place, mais je préférerais cette façon car cela me semble le plus logique.

Merci

csscentering
27
Josh K

Cela permet une variable dynamique ul sans largeur si vous ne souhaitez pas spécifier une largeur de 90%:

<!doctype html>
<div class="navbar">
    <div id="for-ie">
        <ul>
            <li><a href="Home">Home</a></li>
            <li><a href="Discounts">Discounts</a></li>
            <li><a href="Contact">Contact Us</a></li>
            <li><a href="About">About Us</a></li>
        </ul>
    </div>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    border:1px solid red;
    display:table;
    overflow: hidden;
}
.navbar li{
    float: left;
    padding: 2px;
    width: 150px;
    margin-left: auto ;
    margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
    #for-ie { text-align:center; }
    #for-ie ul { display:inline-block; }
    #for-ie ul { display:inline; }
</style>
<![endif]-->

Testé dans IE6, FX 3.

EDIT: Style alternatif sans l'élément étranger: 

<!doctype html>
<div class="navbar">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="Discounts">Discounts</a></li>
        <li><a href="Contact">Contact Us</a></li>
        <li><a href="About">About Us</a></li>
    </ul>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    padding: 0px;
    zoom:1;
    border:1px solid red;
    overflow: hidden;
}
.navbar li{
    padding: 2px;
    width: 150px;
    display:inline-block;
}
</style>
<!--[if IE]>
<style>
    .navbar li { display:inline; }
</style>
<![endif]-->
22
meder omuraliev

Vous pouvez utiliser text-align: corrigé pour ce faire avec seulement quelques lignes de CSS, sans balise supplémentaire.

Voir ma réponse ici: https://stackoverflow.com/a/15232761/87520

<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
</ul>

<style>
.navbar > ul {text-align:justify;}
.navbar > ul > li {display:inline-block}
.navbar > ul:after { content:' '; display:inline-block; width: 100%; height: 0 } 
</style>
9
SamGoody

Pour ce faire, il suffit d'utiliser Flexbox:

.navbar ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap; /* assumes you only want one row */
}
4
TedMilker

Cela revient essentiellement à ajouter text-align: center au ul et display: inline-block au li.

Cela semble faire l'affaire:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style type="text/css">
.navbar {
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.navbar li{
    display: inline-block;
    padding: 2px;
    width: 150px;
}
</style>
</head>
<body>
<div class="navbar">
  <ul>
    <li><a href="Home">Home</a></li>
    <li><a href="Discounts">Discounts</a></li>
    <li><a href="Contact">Contact Us</a></li>
    <li><a href="About">About Us</a></li>
  </ul>
</div>
</body>
</html>
2
Fabian

Cherchez-vous quelque chose comme ça :?

.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
.navbar li{
    display:inline;
    line-height:30px;
}
.navbar li a { padding:.4em 5em;}


<div class="navbar">
  <ul>
    <li><a href="Home">Home</a></li>
    <li><a href="Discounts">Discounts</a></li>
    <li><a href="Contact">Contact Us</a></li>
    <li><a href="About">About Us</a></li>
  </ul>
</div>
0
DHuntrods

vous pouvez utiliser "display: table" et "display: table-cell" le code est plus propre et la largeur li n'est pas codée en dur

<div class="navbar">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="Discounts">Discounts</a></li>
        <li><a href="Contact">Contact Us</a></li>
        <li><a href="About">About Us</a></li>
    </ul>
</div>

.navbar {
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none;
    padding: 0px;
    display: table;
    table-layout: fixed;
    width: 100%;
}
.navbar li{
    padding: 2px;
    display:table-cell;
    width: 50px; /* just for the browser to get idea that all cells are equal */
    text-align: center;
    border: 1px solid #FF0000;
}

http://jsfiddle.net/dchwv6qn/1/

0
Picard

vous devez définir un fixe avec pour votre conteneur.

par exemple:

.navbar {
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF; }

si vous voulez conserver votre couleur bg de .navbar, collez-vous à 100%, retirez le flottant de li et lignez-le comme ceci->

.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    width: 800px;
    overflow: hidden;
}
.navbar li{
    display: inline-block;
    padding: 2px;
    width: 150px;
    marign: 0 auto;
}
0
Rito