CSSで点線のスペーサ/インフィルを追加

Question

私はレストランのウェブサイトで作業しています。このデザインでは、メニューアイテムと価格の間の典型的な点線の塗りつぶしが必要です。私はネットを精練して1時間ほどそれをぶち壊しているだけで、CSSだけでこれを行う良い方法は見つけられないようです。私はあなたが固体の色の背景を持っている場合は素晴らしい仕事をここにいくつかの他のソリューションを見つけましたが、このサイトでは、背景画像を使用し、それらのソリューションは動作しませんでした。

例：Menu style "...." - fill in with periodsは良い解決策を持っていますが、背後に点線が表示されないように背景色を白く設定していますが、ビルドしているページには背景画像があります。格好悪いです。

私は、テーブル行/テーブルセルの組み合わせや他の種類のCSS表示属性と幅設定を要素に使用しようとしましたが、ダイスは使用しませんでした。ここで

は、いくつかの偽のサンプルマークアップです：

<ul> 
    <li><span>Soup</span><span class="dots">&nbsp;</span><span>$2.99</span></li> 
    <li><span>Ice cream</span><span class="dots">&nbsp;</span><span>$5.99</span></li> 
    <li><span>Steak</span><span class="dots">&nbsp;</span><span>$20.99</span></li> 
</ul> 

私は、これはギャップを埋めるために下の境界と、「ドット」クラス要素を使用して動作するように取得しようとしてきたが、何も私は作品を試していません。また、各行の一番下にLI要素の下端を配置するだけですが、これはデザイナーが望むものではありません。私は最後の手段としてjavascriptでそれを行うことを考えることができますが、皆さんにアイデアがあるかどうかを見たいと思っていました。あるいは、私はテーブルを使うことができますが、実際にはテーブルを避けたいと思っていました。

ありがとうございます！

Answer 1

：

Example Fiddle

それは.dots要素上の点線の境界線を使用し、トップにそれをいくつかのピクセルをシフトします。

ul li { 
    display:table-row; 
    width:15em; 
} 
ul li span{ 
    display:table-cell; 
} 
.dots{ 
    min-width:10em; 
    position:relative; 
    bottom:4px; 
border-bottom:1px dotted #777; 
} 

いいえsideeffect - 要素を浮動させる必要はありません。ただし、このソリューションはdisplay:table-cellを使用しているため、これは古いIE（< IE8）では機能しません。
背景に応じて、li-border solutionを使用して、スパン要素の単色を背景画像自体に置き換えることができます。

Answer 2

私は定義リスト（fiddle）を使用することによって達成することができます。

HTML：

<div id="wrap"> 
    <div class="inner"> 
     <dl> 
      <dt>$2.89</dt> 
      <dd><em>Lorem ipsum dolor sit amet </em></dd> 
     </dl> 
     <dl> 
      <dt>$21.89</dt> 
      <dd><em>In porta nisl id nisl varius ullamcorper</em></dd> 
     </dl> 
     <dl> 
      <dt>$5.99</dt> 
      <dd><em>Suspendisse augue mauris, mattis ac, commodo quis, lobortis vel, mauris. Etiam dolor neque, iaculis sit amet, tincidunt nec, elementum ut, lorem.</em></dd> 
     </dl> 
     <dl> 
      <dt>$8.99</dt> 
      <dd><em>Donec sed felis sit amet risus</em></dd> 
     </dl> 
     <dl> 
      <dt>$11.50</dt> 
      <dd><em>Maecenas ante. Suspendisse pharetra, metus in tempus egestas, purus ante pellentesque purus, at gravida metus elit nec nunc. Etiam ante ligula, porttitor et, euismod commodo, pulvinar id, pede. Curabitur et magna. Vestibulum leo nibh, viverra sed, imperdiet non,</em></dd> 
     </dl> 
     <dl> 
      <dt>$5.99</dt> 
      <dd><em>Etiam ante ligula,</em></dd> 
     </dl> 
     <dl> 
      <dt>$5.99</dt> 
      <dd><em>Fusce condimentum</em></dd> 
     </dl> 
     <dl> 
      <dt>$7.55</dt> 
      <dd><em>Morbi nibh velit, sodales eu</em></dd> 
     </dl> 
     <dl> 
      <dt>$6.50</dt> 
      <dd><em>Etiam ante ligula,</em></dd> 
     </dl> 
     <dl> 
      <dt>$11.50</dt> 
      <dd><em>Fusce condimentum</em></dd> 
     </dl> 
     <dl> 
      <dt>$2.50</dt> 
      <dd><em>Morbi nibh velit, sodales eu</em></dd> 
     </dl> 
     <dl> 
      <dt>$21.50</dt> 
      <dd><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta nisl id nisl varius ullamcorper.</em></dd> 
     </dl> 
    </div> 
</div> 

CSS：私はこのようなものとなるだろう

* {margin:0;padding:0} 
h1,h2{padding:10px 20px 0} 
#wrap{ 
    width:500px; 
    border:1px solid #eff2df; 
    margin:20px 20px; 
    background:#809900; 
} 
* html #wrap {width:502px;w\idth:500px;} 
#wrap .inner{ 
    padding:20px 40px; 
    border:1px solid #4c7300; 
    position:relative; 
    left:-2px; 
    top:-2px; 
    background:#eff2df; 
    color:#4c7300; 
    width:418px; 
} 
* html #wrap .inner{width:500px;w\idth:418px;} 
#wrap dl{ 
    position:relative; 
    width:100%; 
    border-bottom:1px solid #eff2df; 
} 
#wrap dd{ 
    line-height:1.2em; 
    position:relative; 
    padding:0 5em 0 0; 
    text-align:left; 
    border-bottom:1px dotted #000; 
    clear:both; 
    margin:0 0 .4em 0; 
    min-height:0; 
} 
* html #wrap dd{ 
    border:none; 
    background: url(images/dotted-leader.gif) repeat-x left bottom; 
    height:1%; 
} 
#wrap dt{ 
    background:#eff2df; 
    padding:1px 0 1px 5px; 
    color:#809900; 
    position:absolute; 
    bottom:0px; 
    right:-1px; 
    z-index:99; 
} 
#wrap dd em{ 
    margin:0 ; 
    position:relative; 
    top:.25em; 
    padding:0 5px 0 0; 
    background:#eff2df; 
} 

Reference Link