由于负边距而影响前一项的新列表项

Question

我正在制作一个步骤指示器，我将其作为列表实现：

<ol>
    <li>Step 1</li>
    <li class="active">Step 2</li>
    <li>Step 3</li>
</ol>

为了表明进度，每个列表元素都有一个圆角边缘，所以我有以下CSS：

li{
  display: block; background-color: white; width: 33%; border: 1px solid #ddd; text-indent: 40px;
  float: left;
  margin: 0 0 0 -20px;
  border-radius: 0 15px 15px 0;
}

我的问题是后来的元素会在前面遮挡，因此隐藏了圆角。我试图为每个元素设置一个递减的z-index，但它不起作用（除此之外我无法使用此解决方案）。我通过更改为float:right来实现所需的演示文稿但是按降序呈现列表项目...

查看此jsfiddle了解详情：http://jsfiddle.net/fMRbr/

Answer 1

您可以使用:before

li{
    display: inline-block;
    width: 33%;
    margin: 0 0 0 -20px;
    border: 1px solid #ddd;
    border-radius: 0 15px 15px 0;
    background-color: white;
    text-indent: 40px;
    
    position: relative;
}

li.active{
 background-color: red;   
}

li:before{
    content: '';
    width: 15px;
    height: 19px;
    display: inline-block;
    background: #fff;
    border: 1px solid #ddd;
    border-width: 0 1px 1px 0;
    border-radius: 0 15px 15px 0;
    position: absolute;
    top: 0;
    left: -3px;
}

li.afteractive:before {
    content: '';
    width: 15px;
    height: 19px;
    display: inline-block;
    background: #f00;
    border: 0;
    border-radius: 0 15px 15px 0;
    position: absolute;
    top: 0;
    left: -3px;
}

<ol>
  <li class="active">Step 1</li>
  <li class="afteractive">Step 2</li>
  <li>Step 3</li>
</ol>

<br /><br />

<ol>
  <li>Step 1</li>
  <li class="active">Step 2</li>
  <li class="afteractive">Step 3</li>
</ol>

<br /><br />

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li class="active">Step 3</li>
</ol>

Answer 2

您是否考虑过每个border-radius右上角的Tbackground图像，而不是使用margin和否定的<li>值，如下所示：

活动（红色）<li>具有相似的背景但是红色。结果应如下所示：

Answer 3

使用display: inline-block向您的li添加范围标记，以便它们自动增长到正确的宽度：

<强> HTML

<ol>
  <li><span>Step 1</span></li>
  <li class="active"><span>Step 2</span></li>
  <li><span>Step 3</span></li>
</ol>

<强> CSS

li {
  display: block;
  float: left;
  width: 33%;
  margin: 0 0 0 -20px;
  background-color: white;
  text-indent: 40px;
}
li.active {
}

li.active span {
  background-color: red;
}
li span {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 0 15px 15px 0;
  padding-right: 10px;
}

请在此处查看此解决方案的jsfiddle：

http://jsfiddle.net/c4urself/HYQSJ/