Preparare il pangrattato ... non facile come fare letteralmente il pangrattato, come posso far sì che il testo sia dentro?

Question

Quindi ho preparato del pangrattato tramite il codice da

http://line25.com/tutorials/how-to-create-flat-style-breadcrumb-links-with-css

... e ho ottenuto tutto nel modo in cui mi piace, solo per la mia vita, non riesco a capire come ottenere il testo all'interno delle caselle ... Il problema è che esistono separatamente, posso usare la linea -Pesa per spingere ulteriormente il testo nella pagina, tuttavia non posso usare un numero negativo per spingere il testo .... Lo stesso vale per il margine-top ...

EDIT: So che il codice da Link25 funziona bene perché il testo è all'interno, è perché ho ridotto i contenitori che ho questo problema ...

Qualche idea?

Ecco HTML (StackOverflow continua a tradurlo):

E il CSS:

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

briciole {text-align: centro; }

#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/

È causato dalle tue ancore che hanno un'imbottitura superiore pari all'altezza che desideri che le briciole abbiano. Ho rimosso quell'imbottitura, ho dato l'elemento elenco contenente height:30px;, ha dato le ancore line-height:30px; Quindi rimangono centrati verticalmente.

#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;
}

Modificare

Non sono sicuro di cosa intendi per loro esistenti separatamente. Ho appena copiato il codice che hai fornito in un violino e l'ho eseguito. E ho visto il problema apparente e ho fatto quello che potevo. Ecco il problema che ho visto. http://jsfiddle.net/zh6bw/