所以我通过以下代码制作了一些面包屑
http://line25.com/tutorials/how-to-create-flat-style-breadcrumb-links-with-css
...而且我按照自己喜欢的方式得到了所有内容,仅在我的一生中,我不知道如何获取框中的文本...问题是它们分开存在,我可以使用 line -height 将文本向下推得更远,但是我不能使用负数将文本向上推……页边距顶部也是如此……
编辑:我知道来自 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 */