web-dev-qa-db-fra.com

Affichage: inline ne fonctionne pas

Je suis assez nouveau en html et css.

J'ai appris les bases et quelques techniques avancées, mais j'ai un problème avec les listes depuis longtemps et j'aimerais savoir comment je pourrais éventuellement résoudre mon problème.

Voici l'idée.

Je fais une boutique en ligne mais je veux éviter de positionner chaque image, texte, lien en utilisant un identifiant différent.

J'ai eu cette idée, je mettrais mon li dans un div de cette façon, tout ce qui est dans ma liste serait coincé dans cette boîte, ferais une classe en positionnant correctement mon texte, mes liens, mes images, utiliser display: inline et et voila, je peux créer une page entière de produits en utilisant uniquement une classe.

Le problème est d'affichage: inline ne fonctionne pas.

J'apprécierais vraiment si quelqu'un pouvait m'aider sur celui-ci.

C'est un mauvais exemple mais, vous comprenez le principe.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    #nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;}
    .nav_button {background-color:purple;width:100px;height:50px;}
    .nav_button:hover {background-color:pink;}
    .nav_button li {display:inline;} /* Not working ?!? */
    .nav_button a {position:relative;color:white;text-decoration:none;top:13px;}
</style>
</head>

<body>
    <table style="width:600px;margin:0 auto;">
        <tr>
            <td>
                <ul id="nav_bar">
                    <div class="nav_button"> <li> <a href="#">Home</a> </li> </div>
                    <div class="nav_button"> <li> <a href="#">Contact us</a> </li> </div>
                    <div class="nav_button"> <li> <a href="#">Shipping</a> </li> </div>
                    <div class="nav_button"> <li> <a href="#">About us</a> </li> </div>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>
htmlcsslistunordered
17
Dany

display:inline est très limité et ne permet aucun style niveau bloc à y ajouter. Il vaut mieux utiliser display:inline-block ou en utilisant float:left. Gardez à l'esprit que si vous utilisez des flottants, vous devez définir le débordement de l'élément parent sur overflow:auto (utilisez visible pour IE <8) et cela devrait fonctionner. Utilisez d'abord le bloc en ligne.

31
matsko

La raison pour laquelle cela ne fonctionne pas est que vous l'utilisez dans un div et que cet élément div n'a qu'un élément li, la propriété inline fonctionnerait si vous avez plusieurs éléments li sous un div.

Essaye ça

<ul id="nav_bar">
    <li class="nav_button"> <a href="#">Home</a> </li>
    <li class="nav_button"> <a href="#">Contact us</a> </li>
    <li class="nav_button"> <a href="#">Shipping</a> </li>
    <li class="nav_button" > <a href="#">About us</a> </li>
 </ul>

et pour css

#nav_bar .nav_button {display:inline-block;}

ou vous pouvez également utiliser:

#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/

si vous utilisez la méthode float, assurez-vous que vous utilisez un élément spécifié avec clear:both; à la fin.

3
Amyth

notez que: si la largeur de l'élément parent est trop courte pour être affichée horizontalement,

ul {
width: 20px;
}
li
{
display: inline;
}

ne fonctionnera pas.

également sous l'élément li si vous avez display: block; déclaration telle que

li
{
display: inline;
}
li a{
display: block;
}

ne fonctionne pas.

1
Emre