List-style s'en va avec inline-block - mais je veux que ma liste de décorateurs pour rester

Comment faire pour le convaincre de rester?

J'ai la liste suivante - pour le moment-je ajouter à ma liste li display: inline-block; la liste personnalisée des décorateurs j'ai désigné disparaître.

Est-il un CSS façon de garder ma liste décorateurs lorsque la liste est à l'horizontale, ou liste des décorateurs jamais censé apparaître avec des listes verticales? Bien sûr, je pourrais juste avoir une image à côté de chaque entrée de la liste, mais pour des raisons de simplicité, je préfère traiter avec ceci dans le CSS.

.first-page-menu-list {
    list-style-image: url('../graphics/list-style-image.png');
    list-style-position: inside;
    text-transform: uppercase;
}

OriginalL'auteur gersande | 2013-08-10

  1. 6

    Une autre méthode consiste à faire flotter le li éléments.

    <ul>
    <li>the item</li>
    <li>the item</li>
    <li>the item</li>
</ul>

ul {
    overflow: auto; /* similar to clearing the floats... */
    border: 1px solid gray;
}
ul li {
    float: left;
    border: 1px solid blue;
    padding: 10px;
    margin: 0 20px;
}

    Démo violon: http://jsfiddle.net/audetwebdesign/kBNVz/

    Cela a fonctionné à merveille, merci beaucoup!
    ce comportement est à la fois bizarre
    Juste curieux, bizzare dans quel sens?
    pourquoi serait-li balles disparaissent si je changer leur type d'affichage à autre chose, et si je me souviens bien il a utilisé pour ne pas être le cas.
    Si vous modifiez le type d'affichage d'un li élément, puis le navigateur n'est pas obligé d'ajouter des marqueurs de liste. Par exemple, si vous placez une p élément dans un ul, alors vous ne seriez pas s'attendre à une liste de marqueur s'affiche à gauche de la p.

    OriginalL'auteur Marc Audet

  2. 4

    Il semble que vous avez raison, mais il y a une solution facile pour cela, il suffit d'utiliser l'arrière-plan tant que vous ne l'utilisez pas, sinon, essayez ceci:

    CSS:

    .first-page-menu-list li {
    background: url('../graphics/list-style-image.png') no-repeat 0px 4px;
    display: inline;
    text-transform: uppercase;
    padding-left: 15px;
    margin-left: 10px;
}

    HTML:

    <ul class="first-page-menu-list">
    <li>asd</li>
    <li>asdf </li>
    <li> asdf</li>
</ul>

    Jouer avec le px valeurs et vous pourrez facilement voir qu'est-ce qui de magie

    utile dans certaines conditions, je suppose.

    OriginalL'auteur sternAndy

  3. 0

    Flexbox fonctionne bien pour ce sans avoir besoin de vider votre flotte.

    ul.inline-list-style {
  list-style: upper-roman;
  display: flex;      
}
ul.inline-list-style li {
  flex: 1;
}

    OriginalL'auteur moladukes