5

私はレストランのウェブサイトで働いています。このデザインでは、メニュー項目と価格の間に典型的な点線の埋め込みが必要です。私はネットを精査して1時間ほどいじっていますが、CSSだけでこれを行う良い方法を見つけることができないようです. ここで、背景が単色の場合にうまく機能する他のいくつかのソリューションを見つけましたが、このサイトでは背景画像を使用しており、それらのソリューションは機能しません.

例:メニュー スタイル "...." - ピリオドで埋めるのは良い解決策ですが、メニュー項目と価格の背景色を白に設定して、背後にある点線を非表示にしますが、作成中のページには無地の背景は見栄えが悪くなります。

table-row/table-cell またはその他のタイプの 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 で実行することしか考えられませんが、何かアイデアがあるかどうかを確認したかったのです。または、テーブルを使用することもできますが、それも避けたかったのです。

ありがとう！

4

2 に答える 2

4

私は次のようなものに行きます：

フィドルの例

要素の点線の境界線を使用し、.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;   
}

良い副作用 - 要素をフロートする必要はありません。ただし、このソリューションは使用するdisplay:table-cellため、古い IE (<IE8) では機能しません。
背景によっては、li-border ソリューションを使用して、スパン要素の単色を背景画像自体に置き換えることができます。

于 2012-07-26T08:12:20.850 に答える
4

定義リスト ( 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;
}

参照リンク

于 2012-07-26T07:51:35.523 に答える