Affichage: inline ne fonctionne pas

Je suis assez nouveau dans le code html et css.

J'ai appris les bases et quelques techniques avancées, mais, j'ai eu un problème avec les listes pour une longue période et voudrais savoir comment je pourrais régler mon problème.

Voilà l'idée.

Je suis en train de faire une boutique en ligne mais je veux éviter de positionnement de chaque unique des images,des textes,des liens à l'aide d'un id différent.

J'ai eu cette idée, je voudrais mettre mon li à l'intérieur d'un div, de sorte que, tout à l'intérieur de ma liste serait coincé à l'intérieur de cette boîte, faire une classe de positionner mon texte,des liens,des images correctement, utiliser display:inline et et voila, je peux créer une page entière de produits en utilisant une seule classe.

Le problème, c'est display:inline n'est pas de travail.

Je serais vraiment reconnaissant si quelqu'un pouvait m'aider à ce sujet.

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>

source d'informationauteur Dany

  1. 26

    display:inline est très limité et ne permet pas d' au niveau du bloc style ajouté. Il est préférable d'utiliser display:inline-block ou à l'aide de float:left. Gardez à l'esprit que si vous utilisez des flotteurs ensuite, vous devez définir le dépassement de l'élément parent à overflow:auto (visible pour IE < 8) et cela devrait fonctionner. Utiliser inline-block première.

  2. 3

    La raison pour laquelle il n'est pas le travail, c'est parce que vous l'utilisez insidea un div et que l'élément div n'a qu'élément li , la ligne de propriété si vous avez plus d'un li-éléments sous une div.

    Essayer cette 

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

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

    ou sinon, vous pouvez aussi utiliser :

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

    si vous utilisez le float méthode assurez-vous d'utiliser un élément spécifié avec clear:both; à la fin.

  3. 1

    remarque : si l'élément parent largeur est trop courte pour afficher horizantally puis 

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

    ne fonctionnera pas.

    aussi
    en vertu de l'élément li si vous avez display:block; déclaration comme 

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

    pas de travail.