2016-03-29 18 views
0

私は順不同リスト内のリンクを含む場合、私は私のプログレスバーをスタイリングいくつかの困難を持っている:プログレスバーのcssスタイリング問題

リンクのない、それは完全に罰金です:それは削除されたリンクと

enter image description here

progessバー:

enter image description here

私はCSSのhref、主にPスタイリング試してみましたimo table-cellは実際に進捗線の接続を作成しているので、これはうまくいかなかったため、

display:table-cell 

となりました。私のコードはここにある:https://jsfiddle.net/m7oak1wy/14/

答えて

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; 
 
\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>

2

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)

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を得ることができます

+0

I、すなわち、それがクリック可能である必要があり、同様にHREFに緑色ライン+サークルを含めます。 OPでそう言わなければならないでしょう。 – klabanus

+0

問題はありません。私は自分の答えを編集しました –

+1

@klabanus '7.5px'は(正確に)動作しません。 pxは '% 'ではない整数に丸めます。 –

0
<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 
0

チェック、必要な、それはあなたを助けるかもしれないと。

/* 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>