CSS pour mettre en forme la légende des clés / valeurs horizontalement.

Je suis entrain de créer un horizontal légende en html/css. J'ai une boîte de couleur avec texte en regard, puis un espace, puis une autre boîte de couleur avec du texte, un espace, etc.

[blue] - LabelA    [green] - LabelB    [red] - LabelC

Je ne peux pas comprendre comment ce faire de la croix-navigateur. J'ai essayé toutes les combinaisons de divs flottantes/travées, que je pense, mais soit l'étiquette finit par aller en dessous de la boîte de couleur ou je ne peux pas obtenir de rembourrage pour les travaux de séparer chaque clé dans la légende.

Comment le feriez-vous?

source d'informationauteur Davis Dimitriov

  1. 13

    Vous n'avez pas besoin de flotteurs pour ce genre de chose. Vraiment ce que vous avez est une liste de paires. Il y a un tag set appelé un liste de définition: 

    <dl>
    <dt>[blue]</dt>
    <dd> - LabelA </dd>

    <dt>[green]</dt>
    <dd> - LabelB </dd>

    <dt>[red]</dt>
    <dd> - LabelC </dd>
</dl>

    Ce sont des inline block par défaut. De là, vous pouvez définir le style des paires d'éléments comme: 

    <style>
     dl
     {
         width: 200px;
         background: #fff;
         border: 1px solid #000;
         padding: 5px 15px;
      }

      dt, dd
      {
         display: inline;
      }       
</style>
  2. 54

    Voici un exemple simple: http://jsfiddle.net/MTB2q/

    CSS pour mettre en forme la légende des clés /valeurs horizontalement.

  3. 8

    découvrez ce jsfiddle et voir si c'est ce que vous êtes à la recherche pour http://jsfiddle.net/CQXk5/

  4. 1

    Pas nécessaire d'utiliser des divs flottantes. Essayez cette

    DIV.LegendItem
{
   display:inline-block;
   margin-right:20px;
}

    (ajouter la largeur et la hauteur si la DIV n'a pas de contenu)

    Désolé si votre texte n'est pas dans la boîte de dialogue ajouter cette...

    SPAN.LegendText
{
   display:inline-block;
   margin-right:20px;
}

    Exemple ici

  5. 1

    Cela devrait fonctionner...

    Éviter flotte comme vous l'avez mentionné spécifiquement de la croix-navigateur, donc je suppose que vous êtes au moins de l'appui à IE7. IE7 enveloppements flotte dans une sorte de méchant manière qui est pourquoi j'ai suggéré inline divs.

    DOCTYPE HTML

    <!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

    HTML

    <div class="Legend">
  <div class="Blue">&nbsp;</div>
    Blue
    <div class="Green">&nbsp;</div>
    Green
    <div class="Red">&nbsp;</div>
    Red
</div>

    CSS

    .Legend div{
    margin-left:15px;
    width:16px;
    border:1px solid #808080;
    display:inline-block;
}
.ie7 .Legend div{
    display:inline;
    zoom:1;
}
.Red {background-color:red;}
.Green {background-color:green;}
.Blue {background-color:blue;}
  6. 0

    Essayez d'utiliser un petit tableau et à l'aide de couleurs d'arrière-plan.

    <table>
  <tr>
    <td style="backgroundcolor:red; width:5px">&nbsp;</td>
    <td>- Red</td>
  </tr>
</table>