Question

当我在无序列表中包含链接时，我在设置进度条时遇到了一些困难：

没有链接，这很好：

通过链接删除了progess栏：

我尝试在css中设置一个href样式，主要是玩：

    display:table-cell

因为imo table-cell实际上正在创建进度线连接，但到目前为止还没有成功。我的代码在这里：https://jsfiddle.net/m7oak1wy/14/

Answer 1

OL（/ UL）不能包含其他子项，只有LI（你有一些a）。

一个秘密？永远不要超出需要的LI元素只需要足够的样式来水平/垂直地设置它们，然后继续设计它们的内部元素即相反，如果您设置内部A元素的样式，您可以获得更大的可点击UI元素（=很棒的UI）

See this fiddle

<强> HTML

<ol class="etapier">
    <li class="done"><a href="">1.</a></li>
    <li class="done"><a href="">2.</a></li>
    <li class="todo"><a href="">3.</a></li>
    <li class="done"><a href="">4.</a></li>
    <li class="done"><a href="">5.</a></li>
</ol>

CSS：

/* CHANGE COLOR HERE */ 
ol.etapier li.done {
  border-color: yellowgreen ;
}
/* CHANGE COLOR HERE */ 
ol.etapier li.done:before {
    background-color: yellowgreen;
    border-color: yellowgreen;
}


ol.etapier {
    display: table;
    list-style-type: none;
    margin: 0 auto 20px auto;
    padding: 0;
    table-layout: fixed;
    width: 100%;
}
ol.etapier li {
    display: table-cell;
    text-align: center;
    padding-bottom: 10px;
    white-space: nowrap;
    position: relative;
}

ol.etapier li a {
    color: inherit;
}

ol.etapier li {
    color: silver; 
    border-bottom: 4px solid silver;
}
ol.etapier li.done {
    color: black;
} 
ol.etapier li a { position :relative; }
ol.etapier li a:before {
    position: absolute;
    bottom: -23px;
    left: 0;
    margin-left:-5px;

    color: white;
    height: 15px;
    width: 15px;
    line-height: 15px;
    border: 2px solid silver;
    border-radius: 15px;

}
ol.etapier li.done a:before {
    content: "\2713";
    color: white;
    background-color: green
}
ol.etapier li.todo a:before {
    content: " " ;
    background-color: white;
}

Answer 2

我已经完成了，你问的是什么。

请查看以下给定的代码段。

由于

/* CHANGE COLOR HERE */ 
ol.etapier li.done {
  border-color: yellowgreen ;
}
/* CHANGE COLOR HERE */ 
ol.etapier li.done:before {
    background-color: yellowgreen;
    border-color: yellowgreen;
}


ol.etapier {
    display: table;
    list-style-type: none;
    margin: 0 auto 20px auto;
    padding: 0;
    table-layout: fixed;
    width: 100%;
}
ol.etapier a {
    display: table-cell;
    text-align: center;
    white-space: nowrap;
    position: relative;
}
ol.etapier a li {
    display: block;
    text-align: center;
    white-space: nowrap;
    position: relative;
}
ol.etapier li {
    display: table-cell;
    text-align: center;
	padding-bottom: 10px;
    white-space: nowrap;
    position: relative;
}

ol.etapier li a {
	color: inherit;
}

ol.etapier li {
    color: silver; 
    border-bottom: 4px solid silver;
}
ol.etapier li.done {
    color: black;
}

ol.etapier li:before {
    position: absolute;
    bottom: -11px;
    left: 50%;
    margin-left: -7.5px;

    color: white;
    height: 15px;
    width: 15px;
    line-height: 15px;
    border: 2px solid silver;
    border-radius: 15px;
    
}
ol.etapier li.done:before {
    content: "\2713";
    color: white;
}
ol.etapier li.todo:before {
    content: " " ;
    background-color: white;
}

<ol class="etapier">
    <a href=""><li class="done">1.</li></a>
    <li class="done">2.</li>
    <li class="todo">3.</li>
    <li class="done">4.</li>
    <li class="done">5.</li>
</ol>

Answer 3

<ol class="etapier">
<li class="done"><a href="">1.</a></li>
<li class="done"><a href="">2.</a></li>
<li class="todo"><a href="">3.</a></li>
<li class="done"><a href="">4.</a></li>
<li class="done"><a href="">5.</a></li>
</ol>


 you use anchor in li this will fine to work

Answer 4

根据您的要求检查以下代码，它可能对您有帮助。

＆＃13;

/* CHANGE COLOR HERE */ 
ol.etapier li.done {
  border-color: yellowgreen ;
}
/* CHANGE COLOR HERE */ 
ol.etapier li.done:before {
    background-color: yellowgreen;
    border-color: yellowgreen;
}


ol.etapier {
    display: table;
    list-style-type: none;
    margin: 0 auto 20px auto;
    padding: 0;
    table-layout: fixed;
    width: 100%;
}
ol.etapier li {
    display: table-cell;
    text-align: center;
	padding-bottom: 10px;
    white-space: nowrap;
    position: relative;
}

ol.etapier li a {
	color: inherit;
}

ol.etapier li {
    color: silver; 
    border-bottom: 4px solid silver;
}
ol.etapier li.done {
    color: black;
}

ol.etapier li:before {
    position: absolute;
    bottom: -11px;
    left: 50%;
    margin-left: -7.5px;

    color: white;
    height: 15px;
    width: 15px;
    line-height: 15px;
    border: 2px solid silver;
    border-radius: 15px;
    
}
ol.etapier li.done:before {
    content: "\2713";
    color: white;
}
ol.etapier li.todo:before {
    content: " " ;
    background-color: white;
}
.etapier li a {
    position: absolute;
    top: 0px;
    right: 45%;
    padding: 20px;
}

＆＃13;

<ol class="etapier">
    <li class="done">1.<a href=""></a></li>
    <li class="done">2.<a href=""></a></li>
    <li class="todo">3.</li>
    <li class="done">4.<a href=""></a></li>
    <li class="done">5.<a href=""></a></li>
</ol>

＆＃13;

进度条css样式问题

4 个答案: