点線で箇条書きリスト（メニュー）を作る方法

Question

私は各アンカータグの間に点線で箇条書きリスト/メニューを作ろうとしています。ロールオーバーで

、背景がピンクに変わり、それと点線の間の間隔の適切な量があるはずです：

これは大丈夫に見えますが、私はモバイルレイアウトに切り替えると、点線の位置は完全にオフである。私はちょうどそれがliタグに背景点線を入れて良い/悪い考えだ場合は疑問に思って

li { 
    background: url('images/dotted-line.png') repeat-x 0px 41px; 
    height: 55px; 
    padding: 0; 
} 

a:link, a:visited { 
    display: block; 
    color: @darkpink; 
    font-size: 16px; 
    font-weight: bold; 
    padding: 10px 8px 8px 8px; 
    margin-top: -9px; 
    text-transform: uppercase; 
    width: 195px; /* 188 */ 
    cursor: pointer; 
    .textshadow(); /* less minim */ 
} 

a:hover, a.selected { 
    border-radius: @radius; 
    background-color: @darkpink; 
    .textshadowdark(); 
    cursor: pointer; 
    color: #FFF; 
} 

：

は、ここに私のCSSです。メディアクエリでイメージの位置を変更するか、イメージをanchorタグに置き換える方が良いでしょうか？

Answer 1

うん、私は、スヴェンに同意し、このようなものを使用します。

li { 
    border-bottom:1px dashed #ce1443; 
    height: 55px; 
    padding: 0; 
} 

dottedは少しくらいのことができるので、私はdashedに行き、上記のスクリーンショットは、よりdashedのように見えます。私はちょうどその色のスクリーングラブをつかんだ。

他...あなたはこの携帯電話だけを作ろうとしていますか？それとも応答性があると思われますか？ emのサイズに切り替えることができますので、画面サイズに比例します。