comment donner une partition dans la balise <div> ?

Question

J'apprends le HTML et le CSS. Je veux diviser mon div en utilisant les CSS. Je veux que ma page ait une barre supérieure avec seulement trois liens, avec un grand espace entre les liens. Mon problème est que je ne sais pas comment obtenir cet espace entre les liens. Est-il possible de le faire sans utiliser de tableaux ?

         Home                     About                      Songlist

Answer 1

Voici le balisage de la mise en page que vous décrivez (sans tout le style - juste la mise en page)...

<ul class="menu">
    <li><a href="http://stackoverflow.com/home">Home</a></li>
    <li><a href="http://stackoverflow.com/about">About</a></li>
    <li><a href="http://stackoverflow.com/songs">Songlist</a></li>
</ul>

Et le CSS

ul.menu {
    margin: 0;
    padding: 0;
    text-align: center;
}

ul.menu li {
    display: inline-block;
    width: 33%;
}

ul.menu a {
    display: block;
    width: 100%;
    padding: 0.2em 0;
}

Answer 2

J'aime la réponse de Steve, mais voici une autre façon d'obtenir le même résultat en utilisant 3 Div's distincts.

HTML :

<div class="example">
    <a href="">Home</a>
</div>
<div class="example">
    <a href="">About</a>
</div>
<div class="example">
    <a href="">Songlist</a>
</div>

CSS :

.example
{
    float:left;
    width: 33%;
    background: lightgrey;
    text-align: center;
}

Et Violon pour référence.

Bonne chance, quelle que soit la voie que vous choisissez !

Answer 3

Utilice text-align: justify; sur l'élément conteneur.

Ensuite, étirez le contenu pour qu'il occupe 100% de la largeur

FIDDLE

MARKUP

<div class="container">
<div class="example">
    <a href="">Home</a>
</div>
<div class="example">
    <a href="">About</a>
</div>
<div class="example">
    <a href="">Songlist</a>
</div>
</div>

CSS

.container {
    text-align: justify;
    padding: 0 50px;
    background: aqua;
    height: 30px;
    line-height: 30px;
}

.container:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.example {
    display: inline-block;
}

Answer 4

Vous devez utiliser float propriété css, combinée avec margin / padding ou width. L'idée de la marge est un peu délicate au début, mais elle deviendra vite une seconde nature.

En outre, comme cela a été commenté, vous devriez penser à utiliser <ul> y <li> Balises HTML.

Un tutoriel pour les flotteurs