4

レストランのメニューの一部を Web サイトに正しく表示するのに苦労しています。「2列」のリストで完璧に機能するドットリーダーを使用しています：例

ITEM.......................PRICE
LONGER NAMED ITEM..........PRICE

以下を使用します。

CSS:

p.menu-item {
    overflow: hidden;
}

span.item {
    float: left;
    padding: 0 .2em 0 0;
    margin: 0;
}

span.price {
    float: right;
    padding: 0 0 0 .2em;
    margin: 0;
}

p.menu-item:after {
    content: "";
    display: block;
    overflow: hidden;
    height: 1em;
    border-bottom: 1px dotted;
}

HTML:

<p class="menu-item"><span class="item">ITEM</span><span class="price">PRICE</span></p>
<p class="menu-item"><span class="item">LONGER NAMED ITEM</span><span class="price">PRICE</span></p>

しかし、私は 2 つの価格を持つアイテムのセットをいくつか持っています。

例えば

item..........price 1.....price2
item2.........price 1.....price2

単一価格のアイテムを作成できるオンラインのヘルプしか見つかりません。http://jsfiddle.net/vkDgJ/17/で遊んでみましたが、うまくいかないようです。

助言がありますか？

編集:私のページにはテクスチャ付きの背景画像があるため、以下のコマの回答のように背景色を使用して点線の境界線を非表示にするとうまくいきませんでした。

4

2 に答える 2

4

2 番目のアイデア ( http://jsfiddle.net/coma/wrwwn/2/ ) の方が優れています。列間でドットが重ならないからです。

HTML

<div class="dotted">
    <div>
        <div>
            <span>item</span>
         </div>
        <div>
            <span>price 1</span>
         </div>
        <div>
            <span>price2</span>
         </div>
     </div>
    <div>
        <div>
            <span>item2</span>
         </div>
        <div>
            <span>price 1</span>
         </div>
        <div>
            <span>price2</span>
         </div>
     </div>
</div>

CSS

div.dotted > div:after {
    content: "";
    display: block;
    clear: both;
}

div.dotted > div > div {
    position: relative;
    float: left;
    width: 33.333333%;
}

div.dotted > div > div:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: 1px dotted #000;
    z-index: -1;
}

div.dotted > div > div:last-child:before {
    display: none;
}

div.dotted > div > div > span {
    padding: 0 5px;
    display: inline-block;
    background-color: #fff;
}

http://jsfiddle.net/coma/wrwwn/

価格は右揃え

div.dotted > div {
    position: relative;
}

div.dotted > div:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: 1px dotted #000;
    z-index: -1;
}

div.dotted > div:after {
    content: "";
    display: block;
    clear: both;
}

div.dotted > div > div {
    float: left;
    width: 33.333333%;
}

div.dotted > div > div + div {
    text-align: right;
}

div.dotted > div > div > span {
    padding: 0 5px;
    display: inline-block;
    background-color: #fff;
}

http://jsfiddle.net/coma/wrwwn/2/

固定背景の使用

div.dotted > div > div > span,
html {
    background: #F4EAEC url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3949/3949452.png?1382901481) 0 0 fixed;
}

http://jsfiddle.net/coma/wrwwn/4/

複雑

html {
    background: #F4EAEC url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3949/3949452.png?1382901481) 0 0 fixed;
}

div.dotted div {
    height: 2em;
}

div.dotted > div div {
    float: left;
    width: 50%;
    position: relative;
    overflow: hidden;
}

div.dotted span {
    display: block;
    position: absolute;
    padding: 0 5px;
}

div.dotted span:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    width: 1000px;
    border-top: 1px dotted #000;
}

div.item span {
    left: 0;
}

div.item span:after {
    left: 100%;
}

div.prices span {
    right: 0;
}

div.prices span:after {
    right: 100%;
}

http://jsfiddle.net/coma/wrwwn/6/

于 2013-10-27T09:30:03.790 に答える
0

coma が提供した "Complex" の例で素晴らしい仕事をしてくれたことに感謝します。彼の答えは、選択されたもののままでなければなりません。返信でこれを追加するだけでしたが、そのオプションはありません。

彼の複雑な例を改善して、いくつかのことを可能にしました。

まず、メニューを小さなスペースに配置すると、coma のコードにいくつかの欠陥があることに気付くでしょう。div は 50% に設定されているため、アイテムの名前がそれを超えると、切り捨てられてしまいます (実際にはラップされ、意図的に隠されています)。これを 80/20 測定で修正しました。これは、2 つの価格のうちの 1 つを取り除きたい場合にのみ問題になります。1つだけ欲しい場合はどうしますか？(確かに、coma の他の例は見ていませんでした..たぶん、彼は私のバージョンよりも優れたバージョンを作成しました)。

また、作品によっては説明文が必要だったので、そこにも追加しました。

あちこちに微調整。さらに複雑にして申し訳ありません...しかし、彼の例がなぜ機能するのか、実際には完全には理解できませんでした（まあ.. 90％理解しています）。

高く評価されている場合は、コメントを追加してください。コマはこれで勝利に値する。

ここで私のコードを見つけることができます: http://jsfiddle.net/tFK68/1/

CSS:

html {
    background: #F4EAEC url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3949/3949452.png?1382901481) 0 0 fixed;
color: black;
}

ul.dotted li, ul.dotted div {
height: inherit;
list-style-type: none;
}

ul.dotted > li div {
float: left;
width: 50%;
position: relative;
overflow: hidden;
}

.dotted div.item {
width: 80%;
}

.dotted div.prices {
width: 20%;
overflow: visible;
}

.dotted div.item, .dotted div.prices {
height: 1em;
font-weight: bold;
}

ul.dotted span {
display: block;
position: absolute;
padding: 0 5px;
}

ul.dotted span:after {
content: "";
display: block;
position: absolute;
top: 67%;
width: 1000px;
border-top: 2px dotted #000;
}

div.item span {
left: 0;
}

div.item span:after {
left: 100%;
}

div.prices span {
right: 0;
width: 80%;
}

div.prices div {
width: 100% !important;
}

div.prices span:after {
right: 100%;
}

ul.dotted p {
padding: 0px 10px 0px;
clear: both;
margin-bottom: 0;
}

マークアップは次のとおりです。

<ul class="dotted">
<li>
    <div class="item">
        <span>Miso Soup</span>
     </div>
    <div class="prices">
        <div>
            <span>$1.50</span>
         </div>
     </div>
    <p>Descriptive lorem ipsum dolor.</p>
</li>
</ul>
于 2013-11-15T00:48:26.853 に答える