在另一个箭头

时间：2018-04-05 08:54:20

标签： html css

我的关注ul包含一些li，并显示/设置为箭头，一切正常。

<div class="phases">
  <ul class="breadcrumb">
    <li><a href="Pre-project.aspx">Pre-project</a></li>
    <li><a href="Analysis.aspx">Analysis</a></li>
    <li><a href="Design.aspx">Design</a></li>
    <li><a href="Development.aspx">Development</a></li>
    <li><a href="Implementation.aspx">Implementation</a></li>
    <li><a href="Operation.aspx">Operation</a></li>
  </ul>
</div>

我的问题是我似乎无法将最后5 li包裹在另一个＆＃34;箭头＆＃34;中。 

<div class="phases">
  <ul class="breadcrumb">
    <li><a href="Pre-project.aspx">Pre-project</a></li>
    <li class="breadcrumb_wrapper">
      <ul class="">
        <li><a href="Analysis.aspx">Analysis</a></li>
        <li><a href="Design.aspx">Design</a></li>
        <li><a href="Development.aspx">Development</a></li>
        <li><a href="Implementation.aspx">Implementation</a></li>
        <li><a href="Operation.aspx">Operation</a></li>
      </ul>
    </li>
  </ul>
</div>

这是目前正在运作的例子：

＆＃13;
＆＃13; 
.phases {
  width: 960px;
}

.breadcrumb {
  list-style: none;
  overflow: hidden;
  font: 18px Sans-Serif;
}

.breadcrumb li {
  float: left;
}

.breadcrumb li a {
  color: white;
  text-decoration: none;
  padding: 20px 10px 20px 60px;
  background: blue;
  /* fallback color */
  background: #004c89;
  position: relative;
  display: block;
  float: left;
}

.breadcrumb li.active a {
  background: #0078d7;
}

.breadcrumb li.active a::after {
  border-left: 30px solid #0078d7;
}

.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 #004c89;
  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: 5px;
  left: 100%;
  z-index: 1;
}

.breadcrumb li:first-child a {
  padding-left: 10px;
}

.breadcrumb li a {
  background: #004c89;
}

.breadcrumb li a:after {
  border-left-color: #004c89;
}


/*
    .breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
    .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
    .breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
    .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
    .breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
    .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
    .breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
    .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
    */

.breadcrumb li a:hover {
  background: #0078d7;
}

.breadcrumb li a:hover:after {
  border-left-color: #0078d7 !important;
}
＆＃13; 
<div class="phases">
  <ul class="breadcrumb">
    <li><a href="Pre-project.aspx">Pre-project</a></li>
    <li><a href="Analysis.aspx">Analysis</a></li>
    <li><a href="Design.aspx">Design</a></li>
    <li><a href="Development.aspx">Development</a></li>
    <li><a href="Implementation.aspx">Implementation</a></li>
    <li><a href="Operation.aspx">Operation</a></li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

这是我目前所处的位置。

＆＃13;
＆＃13; 
.phases {
  /*width: 960px;*/
}

.breadcrumb_wrapper {
  color: white;
  text-decoration: none;
  padding: 20px 10px 20px 60px;
  background: blue;
  /* fallback color */
  background: green;
  position: relative;
  display: block;
  float: left;
}

.breadcrumb_wrapper ul {
  list-style: none;
}

.breadcrumb {
  list-style: none;
  overflow: hidden;
  font: 18px Sans-Serif;
}

.breadcrumb li {
  float: left;
}

.breadcrumb li a {
  color: white;
  text-decoration: none;
  padding: 20px 10px 20px 60px;
  background: blue;
  /* fallback color */
  background: #004c89;
  position: relative;
  display: block;
  float: left;
}

.breadcrumb li.active a {
  background: #0078d7;
}

.breadcrumb li.active a::after {
  border-left: 30px solid #0078d7;
}

.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 #004c89;
  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: 5px;
  left: 100%;
  z-index: 1;
}

.breadcrumb li:first-child a {
  padding-left: 10px;
}

.breadcrumb li a {
  background: #004c89;
}

.breadcrumb li a:after {
  border-left-color: #004c89;
}


/*
    .breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
    .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
    .breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
    .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
    .breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
    .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
    .breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
    .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
    */

.breadcrumb li a:hover {
  background: #0078d7;
}

.breadcrumb li a:hover:after {
  border-left-color: #0078d7 !important;
}
＆＃13; 
<div class="phases">
  <ul class="breadcrumb">
    <li><a href="Pre-project.aspx">Pre-project</a></li>
    <li class="breadcrumb_wrapper">
      <ul class="">
        <li><a href="Analysis.aspx">Analysis</a></li>
        <li><a href="Design.aspx">Design</a></li>
        <li><a href="Development.aspx">Development</a></li>
        <li><a href="Implementation.aspx">Implementation</a></li>
        <li><a href="Operation.aspx">Operation</a></li>
      </ul>
    </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

我知道这可能是一件简单的事情，但我真的很震惊。

我想要什么。 enter image description here

3 个答案:

答案 0 :(得分：0)

当您以通用方式设置li's样式而不是按名称类或ID设置样式时，问题就开始了。因此，当此容器与其他容器的样式不同时，breadcrumb_wrapper li会受到影响。尝试为每个li使用一个类。您希望表现为箭头，不要在容器上使用它。

摘录中的起点

＆＃13;
＆＃13; 
.phases {
  /*width: 960px;*/
}

.breadcrumb_wrapper {
 
}

.breadcrumb_wrapper ul {
  list-style: none;
}

.breadcrumb {
  list-style: none;
  overflow: hidden;
  font: 18px Sans-Serif;
}

.breadcrumb .arrow {
  float: left;
}

.breadcrumb .arrow a {
  color: white;
  text-decoration: none;
  padding: 20px 10px 20px 60px;
  background: blue;
  /* fallback color */
  background: #004c89;
  position: relative;
  display: block;
  float: left;
}

.breadcrumb .arrow.active a {
  background: #0078d7;
}

.breadcrumb .arrow.active a::after {
  border-left: 30px solid #0078d7;
}

.breadcrumb .arrow 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 #004c89;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
}

.breadcrumb .arrow 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: 5px;
  left: 100%;
  z-index: 1;
}

.breadcrumb .arrow:first-child a {
  padding-left: 10px;
}

.breadcrumb .arrow a {
  background: #004c89;
}

.breadcrumb .arrow a:after {
  border-left-color: #004c89;
}


/*
    .breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
    .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
    .breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
    .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
    .breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
    .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
    .breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
    .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
    */

.breadcrumb .arrow a:hover {
  background: #0078d7;
}

.breadcrumb .arrow a:hover:after {
  border-left-color: #0078d7 !important;
}
＆＃13; 
<div class="phases">
  <ul class="breadcrumb">
    <li class="arrow" style="margin-right:50px;"><a href="Pre-project.aspx">Pre-project</a></li>
    <li class="breadcrumb_wrapper">
      <ul class="">
        <li class="arrow"><a href="Analysis.aspx">Analysis</a></li>
        <li class="arrow"><a href="Design.aspx">Design</a></li>
        <li class="arrow"><a href="Development.aspx">Development</a></li>
        <li class="arrow"><a href="Implementation.aspx">Implementation</a></li>
        <li class="arrow"><a href="Operation.aspx">Operation</a></li>
      </ul>
    </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我会考虑另一种使用渐变创建形状的方法，并且可以更容易地按照您想要的方式嵌套元素并调整距离并使用边距控制箭头，并且还可以使用我使用的CSS变量轻松更改颜色：

＆＃13;
＆＃13; 
.phases {
  width: 1500px;
}

.breadcrumb {
  list-style: none;
  overflow: hidden;
  font: 18px Sans-Serif;
  margin: 0;
  padding: 10px 0;
}

.breadcrumb li {
  float: left;
  margin-right: -15px;
}

.breadcrumb li:first-child {
  margin-left: -20px;
}

.breadcrumb li a {
  color: white;
  text-decoration: none;
  padding: 20px 40px;
  --c: #004c89;
  background: 
  linear-gradient(var(--c), var(--c)) 20px 0 /calc(100% - 40px) 100% no-repeat, 
  linear-gradient(to bottom right, var(--c) 50%, transparent 50.5%) 100% 100%/20px 51% no-repeat, 
  linear-gradient(to top right, var(--c) 50%, transparent 50.5%) 100% 0/20px 51% no-repeat, 
  linear-gradient(to top left, var(--c) 50%, transparent 50.5%) 0 100%/20px 51% no-repeat, 
  linear-gradient(to bottom left, var(--c) 50%, transparent 50.5%) 0 0/20px 51% no-repeat;
  position: relative;
  float: left;
}

.breadcrumb li a:hover {
  --c: #0078d7;
}

.breadcrumb_wrapper {
  margin-left: 30px;
  position: relative;
}

.breadcrumb_wrapper:before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -25px;
  right: 0;
  --c:green;
  background:
  linear-gradient(var(--c), var(--c)) 20px 0 /calc(100% - 40px) 100% no-repeat, 
  linear-gradient(to bottom right, var(--c) 50%, transparent 50.5%) 100% 100%/20px 51% no-repeat, 
  linear-gradient(to top right, var(--c) 50%, transparent 50.5%) 100% 0/20px 51% no-repeat, 
  linear-gradient(to top left, var(--c) 50%, transparent 50.5%) 0 100%/20px 51% no-repeat, 
  linear-gradient(to bottom left, var(--c) 50%, transparent 50.5%) 0 0/20px 51% no-repeat;
}

.breadcrumb_wrapper .breadcrumb {
  padding: 0;
}

.breadcrumb_wrapper ul li:last-child {
  margin-right: 20px;
}
＆＃13; 
<div class="phases">
  <ul class="breadcrumb">
    <li><a href="Pre-project.aspx">Pre-project</a></li>
    <li><a href="Analysis.aspx">Analysis</a></li>
    <li><a href="Design.aspx">Design</a></li>
    <li class="breadcrumb_wrapper">
      <ul class="breadcrumb">
        <li><a href="Analysis.aspx">Analysis</a></li>
        <li><a href="Design.aspx">Design</a></li>
        <li><a href="Development.aspx">Development</a></li>
        <li><a href="Implementation.aspx">Implementation</a></li>
        <li><a href="Operation.aspx">Operation</a></li>
      </ul>
    </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

像这样更新你的css和html 

<div class="phases">
  <ul class="breadcrumb">
    <li class="first-set-li"><a href="Pre-project.aspx">Pre-project</a></li>
    <li class="breadcrumb_wrapper">
      <ul class="">
        <li><a href="Analysis.aspx">Analysis</a></li>
        <li><a href="Design.aspx">Design</a></li>
        <li><a href="Development.aspx">Development</a></li>
        <li><a href="Implementation.aspx">Implementation</a></li>
        <li><a href="Operation.aspx">Operation</a></li>
      </ul>
    </li>
  </ul>
</div>

HTML 

class Test<T> extends factory(param)<T> { }
相关问题
最新问题