如何將CSS點領域用於「三列」列表？

我正在努力嘗試讓一個餐廳菜單的一部分在網站上正確顯示。我正在使用在「兩列」列表中完美工作的點領導者：如何將CSS點領域用於「三列」列表？

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>

但我有一個項目的幾集有兩種價格。

例如

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

我只能找到網上的幫助，讓我做單一的定價項目。我玩了http://jsfiddle.net/vkDgJ/17/，但似乎無法得到它。

有什麼建議嗎？

編輯：我還應該提到，我的網頁有一個帶紋理的背景圖像，所以使用背景顏色來隱藏虛線邊框，因爲在昏迷的答案下沒有奏效。

來源

2013-10-27 Nic J

第二個想法（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-27 09:30:03 coma

我試過了。我真的認爲這是行得通的，科馬。不幸的是，我在頁面上有一個帶紋理的背景圖片，所以我不能使用背景顏色，邊框會穿過文本。我試圖把與我的頁面相同的背景圖像，但它是這樣一個隨機模式，有一個明顯的矩形偏移它。我編輯了我的原始文章以反映帶紋理的背景。 –

好吧，當我完成另一個時，嘗試背景固定的想法。 – coma

它將與背景完美協作：url（「LINK-TO IMAGE」）無重複固定中心頂部rgba（0,0,0,0）。我不知道我之前爲什麼被困住了。感謝您的幫助。 –

感謝昏迷他在他給予的「複雜」範例上的令人敬畏的工作。他的答案應該保持選定的答案。我只是簡單地添加了這個答覆，但我沒有這個選項。

我改進了他的複雜示例以允許幾件事情。首先，如果你有你的菜單在一個較小的空間內，你會注意到昏迷的代碼將開始有一些缺陷。 divs被設置爲50％，因此如果你的物品的名稱超過了那個，那麼你最終會被切斷（它實際上是包裹的，而且是隱藏的，這是故意的）。我用80/20的測量來解決這個問題。這或多或少只是一個問題，如果你想要拿走兩個價格中的一個。如果你只想要一個呢？（當然，我沒有看過昏迷的其他例子......可能他做了比我更好的版本）。

此外，我需要爲我的作品在某些項目中添加描述行......所以我在其中添加了該行。

小小的調整。對不起，如果我把它進一步複雜化......但我實際上無法完全理解爲什麼他的例子工作無論如何（呃..我理解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-15 00:48:26

如何將CSS點領域用於「三列」列表？

回答

相關問題