빵 부스러기를 만들기 ... 문자 그대로 빵 부스러기를 만드는 것만 큼 쉽지 않아서 어떻게 텍스트를 얻을 수 있습니까?

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

부스러기 {텍스트-정렬 : 센터; }

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