html - 制作面包屑...不像字面上制作面包屑那么容易，我怎样才能让文字在里面？

Question

所以我通过来自的代码制作了一些面包屑

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

...我按照我喜欢的方式得到了一切，只是为了我的生活，我无法弄清楚如何在框中获取文本...问题是它们单独存在，我可以使用 line-height 将文本进一步向下推页面，但是我不能使用负数将文本向上推......同样适用于 margin-top ......

编辑:我知道来自 link25 的代码对于里面的文本工作正常，这是因为我缩小了我遇到这个问题的容器......

有什么想法吗？

这是 HTML(StackOverflow 一直在翻译它):

还有 CSS:

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

crumbs { 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/

这是由于您的 anchor 的顶部填充等于您希望面包屑具有的高度。我删除了填充，给了包含列表元素 height:30px;，给了 anchor 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;
}

编辑

我不确定您所说的它们分别存在是什么意思。我只是将您提供的代码复制到 fiddle 中并运行了它。我看到了明显的问题，我做了我能做的。这是我看到的问题。 http://jsfiddle.net/ZH6BW/