Question

我正在逐步处理这个模式，我遇到了一些问题，正如您在此处看到的那样，将文本对齐：https://jsfiddle.net/54vtc0n0/ 我尝试了对齐 - 垂直：中间，但这对我不起作用，也许我做错了？你们有没有关于如何调整它的想法？

另外，我想将蓝色步骤链接到网址，因此当您单击经过验证的步骤时，它会将您带到页面。然而，看起来我不能在指向外页的li上有一个href。我真的需要这个链接到一个网址。有谁知道解决方法。

提前致谢

HTML：

>>

Answer 1

所以使用我用Google搜索的这个简单教程： https://css-tricks.com/triangle-breadcrumbs/

我能够通过改变颜色来重新创建你的“面包屑”。

https://jsfiddle.net/54vtc0n0/2/

（归功于教程作者：Chris Coyier）

您可以使用java脚本通过更改该选项卡的css来更改活动链接/选项卡颜色，例如：

<强> HTML

 <ul class="breadcrumb">
    <li><a href="#">Start</a></li>
    <li><a href="#">About you</a></li>
    <li><a href="#">Plans</a></li>
    <li><a href="#">Details</a></li>
    <li><a href="#">Enroll</a></li>
</ul>

<强> CSS：

.breadcrumb { 
    list-style: none; 
    overflow: hidden; 
    font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li { 
    float: left; 
}
.breadcrumb li a {
    color: white;
    text-decoration: none; 
    padding: 10px 0 10px 65px;
    background: #009BDA;     
    position: relative; 
    display: block;
    float: left;
}

.breadcrumb li a:after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent;
    border-left: 30px solid #009BDA;
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

.breadcrumb li a:before { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;       
    border-bottom: 50px solid transparent;
    border-left: 30px solid white;
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    margin-left: 1px;
    left: 100%;
    z-index: 1; 
}

.breadcrumb li:first-child a {
    padding-left: 10px;
}
.breadcrumb li:nth-child(2) a       { background:        #D1D1CE; }
.breadcrumb li:nth-child(2) a:after { border-left-color: #D1D1CE; }
.breadcrumb li:nth-child(3) a       { background:        #D1D1CE; }
.breadcrumb li:nth-child(3) a:after { border-left-color: #D1D1CE; }
.breadcrumb li:nth-child(4) a       { background:        #D1D1CE; }
.breadcrumb li:nth-child(4) a:after { border-left-color: #D1D1CE; }
.breadcrumb li:nth-child(5) a       { background:        #D1D1CE; }
.breadcrumb li:nth-child(5) a:after { border-left-color: #D1D1CE; }


.breadcrumb li a:hover { background: #A5A5A5; }
.breadcrumb li a:hover:after { border-left-color: #A5A5A5 !important; }

在格式化你的css时，还有一点建议，每个css规则都不应该被选中...它不是HTML。除非您在需要时使用媒体查询或SASS等内容，否则请继续。

Answer 2

您的padding使文字不会垂直居中

所以你可以像这样调整它：

*{
    box-sizing: border-box;
}
#crumbs ul {
    display: inline-table;
}
#crumbs ul li {
    display:table-cell;
    vertical-align: middle;
}
#crumbs ul li a {
    display:table-cell;
    vertical-align: middle;
    float: left;
    background: #009bda;
    text-align: rigth;
    padding: 15px 5px 15px 60px; /*changed*/
    position: relative;
    /* margin: 0px 0px 5px 0; */
    font-family: Arial;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    height: 50px;  /*added*/
}
#crumbs ul li a:after {
    content:"";
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #009bda;
    position: absolute;
    right: -25px;
    top: 0;
    z-index: 1;
}
#crumbs ul li a:before {
    content:'';
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #fff;
    position: absolute;
    left: 0;
    top: 0;
}
#crumbs ul li:first-child a {
    border-top: 0px;
    border-bottom: 0px;
}
#crumbs ul li:first-child a:before {
    display: none;
}
#crumbs ul li:last-child a {
    padding-right: 10px;
    padding-bottom: 5px;
    border-top-right-radius: 0px;
    border-bottom: 0px;
}
#crumbs ul li:last-child a:after {
    display: none;
}
#crumbs ul li a:hover {
    background: #ed5338;
}
#crumbs ul li a:hover:after {
    border-left-color: #ed5338;
}
<!-----------------------The non active state--------------------------> #crumbs ul li.notactive {
    display: inline;
}
#crumbs ul li.notactive a {
    display: block;
    float: left;
    background: #d1d1ce;
    text-align: rigth;
    padding: 25px 15px 0 60px;
    position: relative;
    margin: 0 0px 5px 0;
    font-family: Arial;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    padding-right: 5px;
    padding-bottom: 5px;
}
#crumbs ul li.notactive a:after {
    content:"";
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #d1d1ce;
    position: absolute;
    right: -25px;
    top: 0;
    z-index: 1;
}
#crumbs ul li.notactive a:before {
    content:"";
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid transparent;
    position: absolute;
    left: 0;
    top: 0;
}
#crumbs ul li.notactive:first-child a {
    border-top: 0px;
    border-bottom: 0px;
}
#crumbs ul li.notactive:first-child a:before {
    display: none;
}
#crumbs ul li.notactive:last-child a {
    padding-right: 10px;
    padding-bottom: 5px;
    border-top-right-radius: 0px;
    border-bottom: 0px;
}
#crumbs ul li.notactive:last-child a:after {
    display: none;
}
#crumbs ul li a:hover {
    background: #ed5338;
}
#crumbs ul li a:hover:after {
    border-left-color: #ed5338;
}
<!-------------------Blue box-------------------------> #crumbs ul li.blue {
    display: inline;
}
#crumbs ul li.blue a {
    display: block;
    float: left;
    background: #009bda;
    text-align: rigth;
    padding: 25px 15px 0 60px;
    position: relative;
    margin: 0 0px 5px 0;
    font-family: Arial;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    padding-right: 5px;
    padding-bottom: 5px;
}
<!-------------------Grey box-------------------------> #crumbs ul li.grey {
    display: inline;
}
#crumbs ul li.grey a {
    display: block;
    float: left;
    background: #d1d1ce;
    text-align: rigth;
    padding: 15px 15px 15px 60px; /*changed*/
    position: relative;
    font-family: Arial;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    padding-right: 5px;
    padding-bottom: 5px;
    height: 50px;
}
#crumbs ul li.grey a:after {
    content:"";
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #d1d1ce;
    position: absolute;
    right: -25px;
    top: 0;
    z-index: 1;
}
#crumbs ul li.grey a:before {
    content:"";
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid transparent;
    position: absolute;
    left: 0;
    top: 0;
}

<div id="crumbs">
    <ul>
        <li><a href="#1">Start </a>
        </li>
        <li class="grey"><a href="#2">About you</a>
        </li>
        <li class="grey"><a href="#3">Plans</a>
        </li>
        <li class="grey"><a href="#4">Details</a>
        </li>
        <li class="grey"><a href="#5">Enroll</a>
        </li>
    </ul>
</div>

或者您可以像这样使用flexbox：

* {
    box-sizing: border-box;
}
#crumbs ul {
    display: inline-table;
}
#crumbs ul li {
    display:table-cell;
    vertical-align: middle;
}
#crumbs ul li a {
    display: flex;
    align-items: center;
    float: left;
    background: #009bda;
    text-align: rigth;
    padding-left: 60px; /*changed*/
    position: relative;
    /* margin: 0px 0px 5px 0; */
    font-family: Arial;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    padding-right: 5px;
    /* padding-bottom: 5px; */
    height: 50px;
}
#crumbs ul li a:after {
    content:"";
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #009bda;
    position: absolute;
    right: -25px;
    top: 0;
    z-index: 1;
}
#crumbs ul li a:before {
    content:'';
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #fff;
    position: absolute;
    left: 0;
    top: 0;
}
#crumbs ul li:first-child a {
    border-top: 0px;
    border-bottom: 0px;
}
#crumbs ul li:first-child a:before {
    display: none;
}
#crumbs ul li:last-child a {
    padding-right: 10px;
    /*padding-bottom: 5px;*/
    border-top-right-radius: 0px;
    border-bottom: 0px;
}
#crumbs ul li:last-child a:after {
    display: none;
}
#crumbs ul li a:hover {
    background: #ed5338;
}
#crumbs ul li a:hover:after {
    border-left-color: #ed5338;
}
<!-----------------------The non active state--------------------------> #crumbs ul li.notactive {
    display: inline;
}
#crumbs ul li.notactive a {
    display: block;
    float: left;
    background: #d1d1ce;
    text-align: rigth;
    padding: 25px 15px 0 60px;
    position: relative;
    margin: 0 0px 5px 0;
    font-family: Arial;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    padding-right: 5px;
    padding-bottom: 5px;
}
#crumbs ul li.notactive a:after {
    content:"";
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #d1d1ce;
    position: absolute;
    right: -25px;
    top: 0;
    z-index: 1;
}
#crumbs ul li.notactive a:before {
    content:"";
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid transparent;
    position: absolute;
    left: 0;
    top: 0;
}
#crumbs ul li.notactive:first-child a {
    border-top: 0px;
    border-bottom: 0px;
}
#crumbs ul li.notactive:first-child a:before {
    display: none;
}
#crumbs ul li.notactive:last-child a {
    padding-right: 10px;
    padding-bottom: 5px;
    border-top-right-radius: 0px;
    border-bottom: 0px;
}
#crumbs ul li.notactive:last-child a:after {
    display: none;
}
#crumbs ul li a:hover {
    background: #ed5338;
}
#crumbs ul li a:hover:after {
    border-left-color: #ed5338;
}
<!-------------------Blue box-------------------------> #crumbs ul li.blue {
    display: inline;
}
#crumbs ul li.blue a {
    display: block;
    float: left;
    background: #009bda;
    text-align: rigth;
    padding: 25px 15px 0 60px;
    position: relative;
    margin: 0 0px 5px 0;
    font-family: Arial;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    padding-right: 5px;
    padding-bottom: 5px;
}
<!-------------------Grey box-------------------------> #crumbs ul li.grey {
    display: inline;
}
#crumbs ul li.grey a {
    /* display: block; */
    float: left;
    background: #d1d1ce;
    text-align: rigth;
    padding-left: 60px;
    position: relative;
    /* margin: 0 0px 5px 0; */
    font-family: Arial;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    padding-right: 5px;
    /* padding-bottom: 5px; */
}
#crumbs ul li.grey a:after {
    content:"";
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #d1d1ce;
    position: absolute;
    right: -25px;
    top: 0;
    z-index: 1;
}
#crumbs ul li.grey a:before {
    content:"";
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid transparent;
    position: absolute;
    left: 0;
    top: 0;
}

<div id="crumbs">
    <ul>
        <li><a href="#1">Start </a>
        </li>
        <li class="grey"><a href="#2">About you</a>
        </li>
        <li class="grey"><a href="#3">Plans</a>
        </li>
        <li class="grey"><a href="#4">Details</a>
        </li>
        <li class="grey"><a href="#5">Enroll</a>
        </li>
    </ul>
</div>

在这两种情况下，我都对已更改的代码进行了评论。

链接在li上并对齐垂直：中间

2 个答案: