Faire de la chapelure ... pas aussi facile que de faire littéralement de la chapelure, comment puis-je obtenir du texte à l'intérieur?

Question

J'ai donc fait du bon pain via le code de

http://line25.com/tutorials/how-to-create-flat-tyle-breadcrumbLinks-with-css

... et j'ai tout ce que je l'aime, seulement pour la vie de moi, je ne peux pas comprendre comment obtenir le texte à l'intérieur des cases ... le problème est qu'ils existent séparément, je peux utiliser la ligne -Height pour pousser le texte dans la page encore plus loin, mais je ne peux pas utiliser un nombre négatif pour pousser le texte ...

Edit: Je sais que le code de Link25 fonctionne bien pour le texte à l'intérieur, c'est parce que j'ai rétréci les conteneurs que j'ai ce problème ...

Des idées?

Voici le HTML (Stackoverflow continue de le traduire):

Et le CSS:

body {
margin: 0px;
font-family: 'Roboto';
background: #eeeeee; }

Crumbs {Text-Align: Centre; }

#crumbs ul {
    list-style:none;
    display: inline-table;

}

    #crumbs ul li { display: inline-block; }

        #crumbs ul li a {    /* The block part of each breadcrumb; the text in each breadcrumb */
            display: block;
            float: left;
            height: 0px;
            background: #327098;
            /*text-align: center; */
            padding: 30px 10px 0 80px;  /* size of each breadcrumb  */
            position: relative;
            margin: 0 5px 0 0;
            font-size: 16px;
            text-decoration: none;
            color: #000000; }

            #crumbs ul li a:after { /* The triangle to the right of each breadcrumb */
                content: "";
                border-top: 15px solid transparent;
                border-bottom: 15px solid transparent;
                border-left: 15px solid #327098;
                position: absolute;
                right: -15px;
                top: 0;
                z-index: 1; }

            #crumbs ul li a:before {    /* the triangle to the left of each breadcrumb  */
                content: "";
                border-top: 15px solid transparent;
                border-bottom: 15px solid transparent;
                border-left: 15px solid #eeeeee;
                position: absolute;
                left: 0;
                top: 0; }

        #crumbs ul li:first-child a {    /* what makes the first breadcrumb have a rounded left side */
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px; }

            #crumbs ul li:first-child a:before { display: none; }

        #crumbs ul li:last-child a {
            padding-right: 80px;    /* the width of the last breadcrumb */
            border-top-right-radius: 10px;  /* Makes the right side of the last breadcrumb rounded */
            border-bottom-right-radius: 10px; } /* rounded */

            #crumbs ul li:last-child a:after { display: none; }

        #crumbs ul li a:hover { background: #c9c9c9; }   /* a hover color for breadcrumbs, exclu. triangle-right    */

            #crumbs ul li a:hover:after { border-left-color: #c9c9c9; } /* a hover color for triangle-right */

Answer 1

http://jsfiddle.net/zh6bw/1/

Il est causé par vos ancres ayant un rembourrage supérieur égal à la hauteur que vous voulez que les miettes aient. J'ai supprimé ce rembourrage, a donné l'élément de liste de contenu height:30px;, a donné les ancres line-height:30px; Ils restent donc centrés verticalement.

#crumbs ul li { 
    display: inline-block; 
    height:30px;
}

#crumbs ul li a {    /* The block part of each breadcrumb; the text in each breadcrumb */
    display: block;
    line-height:30px;
    background: #327098;
    /*text-align: center; */
    padding: 0 10px 0 80px;  /* size of each breadcrumb  */
    position: relative;
    margin: 0 5px 0 0;
    font-size: 16px;
    text-decoration: none;
    color: #000000;
}

Éditer

Je ne sais pas ce que vous entendez par eux existant séparément. Je viens de copier le code que vous avez fourni dans un violon et je l'ai exécuté. Et j'ai vu le problème apparent et j'ai fait ce que je pouvais. Voici le problème que j'ai vu. http://jsfiddle.net/zh6bw/