صنع فتات الخبز ... ليس سهلاً مثل صنع فتات الخبز حرفيًا ، كيف يمكنني الحصول على نص ليكون في الداخل؟

Question

لذلك صنعت بعض فتات الخبز عبر الكود من

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

... وحصلت على كل شيء على الطريقة التي أحبها ، فقط من مدى الحياة لي ، لا يمكنني معرفة كيفية الحصول على النص داخل الصناديق ... المشكلة هي أنها موجودة بشكل منفصل ، يمكنني استخدام الخط -ارتدِ دفع النص إلى أسفل الصفحة إلى أبعد من ذلك ، ومع ذلك لا يمكنني استخدام رقم سالب لدفع النص لأعلى .... ينطبق الشيء نفسه على قمة الهامش ...

تحرير: أعرف أن الرمز من Link25 يعمل بشكل جيد للنص الموجود في الداخل ، بل لأنني تقلصت الحاويات التي لدي هذه المشكلة ...

أيه أفكار؟

إليك HTML (يستمر Stackoverflow في ترجمته):

و CSS:

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

الفتات {text-align: Center ؛ }

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

إنه ناتج عن وجود حشوة أعلى مساوية للارتفاع الذي تريد أن يكون لفات. أزلت هذا الحشو ، أعطيت عنصر القائمة المحتوية height:30px;, ، أعطى المراسي line-height:30px; لذلك يظلون مركزا رأسيا.

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

يحرر

لست متأكدًا مما تقصده من خلالهم على حدة. لقد قمت للتو بنسخ الكود الذي قدمته في كمان وقمت بتشغيله. ورأيت القضية الظاهرة وفعلت ما بوسعي. هذه هي القضية التي رأيتها. http://jsfiddle.net/zh6bw/