私は順不同リスト内のリンクを含む場合、私は私のプログレスバーをスタイリングいくつかの困難を持っている：プログレスバーのcssスタイリング問題
リンクのない、それは完全に罰金です：それは削除されたリンクと
progessバー：
私はCSSのhref、主にPスタイリング試してみましたimo table-cellは実際に進捗線の接続を作成しているので、これはうまくいかなかったため、
display:table-cell
となりました。私のコードはここにある：https://jsfiddle.net/m7oak1wy/14/
私はあなたが何を求めているかを行っています。
下記のスニペットをご確認ください。
おかげでコードの下に、これと
/* 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;
\t padding-bottom: 10px;
white-space: nowrap;
position: relative;
}
ol.etapier li a {
\t 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>OL（/ UL）他の子供が含まれていますがLI（あなたはそこにいくつかのaを持つ）ことができません。
秘密？必要以上にLI要素をスタイルしないでください。
水平/垂直に設定するだけのスタイルで、内部要素をスタイリングして移動します。
I.
/* 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;
}
A要素のスタイルならば代わりに、あなたは、より大きなクリック可能なUI要素（=偉大なUI）
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を得ることができます
<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
チェック、必要な、それはあなたを助けるかもしれないと。
/* 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;
\t padding-bottom: 10px;
white-space: nowrap;
position: relative;
}
ol.etapier li a {
\t 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;
}<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>
I、すなわち、それがクリック可能である必要があり、同様にHREFに緑色ライン+サークルを含めます。 OPでそう言わなければならないでしょう。 – klabanus
問題はありません。私は自分の答えを編集しました –
@klabanus '7.5px'は（正確に）動作しません。 pxは '％ 'ではない整数に丸めます。 –