Machen Sie Semmelbrösel ... nicht so einfach wie buchstäblich, wie Brotkrumen, wie ich im Inneren des Textes zu sein kann?

Question

Also habe ich über den Code ein paar Brotkrumen gemacht

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

... und ich habe alles so wie ich es mag, nur für das Leben von mir kann ich nicht herausfinden, wie ich den Text in die Felder bekomme ... das Problem ist, dass sie separat existieren, ich kann die Linie verwenden -Theight den Text auf der Seite noch weiter nach unten drücken. Ich kann jedoch keine negative Zahl verwenden, um den Text nach oben zu drücken. Gleiches gilt für die Marge-Top ...

Bearbeiten: Ich weiß, dass der Code von Link25 gut für den im Inneren des Textes funktioniert. Ich habe die Container geschrumpft, dass ich dieses Problem habe ...

Irgendwelche Ideen?

Hier ist der HTML (Stackoverflow übersetzt sie immer wieder):

Und das CSS:

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

Krümel {Text-Align: Mitte; }

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

Es wird durch Ihre Anker verursacht, die eine obere Polsterung haben, die der Höhe entspricht, die die Krümel haben sollen. Ich habe diese Polsterung entfernt und das enthaltende Listenelement gegeben height:30px;, gab die Anker line-height:30px; Also bleiben sie vertikal zentriert.

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

Bearbeiten

Ich bin mir nicht sicher, was Sie damit meinen, dass sie separat existieren. Ich habe gerade den Code kopiert, den Sie in eine Geige bereitgestellt haben, und leitete ihn. Und ich habe das offensichtliche Problem gesehen und ich tat, was ich konnte. Hier ist das Problem, das ich gesehen habe. http://jsfiddle.net/zh6bw/