I'm struggling trying to get one portion of a restaurant menu to display properly on a website. I'm using dot leaders that work perfect in a "two-column" list: e.g.
我正在努力让餐厅菜单的一部分在网站上正确显示。我用的是在“两栏”列表中工作得很好的点领导。
ITEM.......................PRICE
LONGER NAMED ITEM..........PRICE
Using the following:
使用以下:
CSS:
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:
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>
But I have a few sets of items that have two prices.
但是我有几套产品有两个价格。
e.g.
如。
item..........price 1.....price2
item2.........price 1.....price2
I can only find the help online that let me do the single priced items. I played around with http://jsfiddle.net/vkDgJ/17/ but just can't seem to get it.
我只能在网上找到帮助,让我做单一价格的项目。我在http://jsfiddle.net/vkDgJ/17/上玩过,但似乎就是搞不懂。
Any suggestions?
有什么建议吗?
EDIT: I should also mention that my page has a textured background image so using a background color to hide the dotted border as in Coma's answer below didn't work.
编辑:我还应该提到,我的页面有一个纹理化的背景图像,所以使用背景色来隐藏虚线边框,就像下面彗发的答案一样,没有效果。
2 个解决方案
#1
4
The second idea (http://jsfiddle.net/coma/wrwwn/2/) is better because the dots won't overlap between columns.
第二个想法(http://jsfiddle.net/coma/wrwwn/2/)更好,因为这些点不会在列之间重叠。
HTML
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
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/
http://jsfiddle.net/coma/wrwwn/
Prices aligned to the right
价格向右对齐
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/
http://jsfiddle.net/coma/wrwwn/2/
Using a fixed background
使用一个固定的背景
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/
http://jsfiddle.net/coma/wrwwn/4/
Complex
复杂的
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/
http://jsfiddle.net/coma/wrwwn/6/
#2
0
Thanks to coma for his awesome work on the "Complex" example he gave. His answer should remain the selected one. I would have simply added this in reply, but I don't have that option.
由于他在“复杂”的例子上所做的出色工作,他陷入了昏迷。他的回答应该是选择的。我只是简单地补充了一下,但我没有这个选项。
I've improved his Complex example to allow for a few things.
我对他复杂的例子进行了改进,考虑到一些事情。
Firstly, if you have your menu inside a smaller space, you will notice coma's code will start to have some flaws. The divs are set to 50%, therefore if the name of your items goes past that, then you end up with it being cut off (it actually wraps, and is hidden which is intentional). I fixed this with an 80/20 measurement. This is more or less only an issue if you want to take away one of the two prices. What if you want just one? (Granted, I hadn't looked at coma's other examples..maybe he did a better version than mine).
首先,如果你的菜单在更小的空间里,你会发现昏迷的代码会有一些缺陷。divs被设置为50%,因此,如果您的物品的名称超过了50%,那么您的物品就会被切断(它实际上是包装的,是隐藏的,这是有意的)。我用80/20的测量值修正了这个问题。这或多或少是一个问题,如果你想拿走其中一个价格。如果你只想要一个呢?当然,我没有看过昏迷的其他例子。也许他做了一个比我更好的版本)。
Also, I needed for my work to have a description line in some items...so I added that in there as well.
另外,我需要我的工作有一个描述线在一些项目……我把它也加进去了。
Small tweaks all around. Sorry if I've convoluted it further...but I couldn't actually fully understand why his example works anyway (well.. I understand 90%).
小调整。对不起,如果我把它弄得太复杂了……但是我还是不能完全理解他的例子为什么有效。我明白了90%)。
If it's appreciated, then just add a comment. Coma deserves the win on this one.
如果你很感激,那就加上一句。昏迷应该在这场比赛中获胜。
You can find my code here: http://jsfiddle.net/tFK68/1/
您可以在这里找到我的代码:http://jsfiddle.net/tFK68/1/。
CSS:
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;
}
Here's the markup:
这里的标记:
<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>
#1
4
The second idea (http://jsfiddle.net/coma/wrwwn/2/) is better because the dots won't overlap between columns.
第二个想法(http://jsfiddle.net/coma/wrwwn/2/)更好,因为这些点不会在列之间重叠。
HTML
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
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/
http://jsfiddle.net/coma/wrwwn/
Prices aligned to the right
价格向右对齐
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/
http://jsfiddle.net/coma/wrwwn/2/
Using a fixed background
使用一个固定的背景
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/
http://jsfiddle.net/coma/wrwwn/4/
Complex
复杂的
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/
http://jsfiddle.net/coma/wrwwn/6/
#2
0
Thanks to coma for his awesome work on the "Complex" example he gave. His answer should remain the selected one. I would have simply added this in reply, but I don't have that option.
由于他在“复杂”的例子上所做的出色工作,他陷入了昏迷。他的回答应该是选择的。我只是简单地补充了一下,但我没有这个选项。
I've improved his Complex example to allow for a few things.
我对他复杂的例子进行了改进,考虑到一些事情。
Firstly, if you have your menu inside a smaller space, you will notice coma's code will start to have some flaws. The divs are set to 50%, therefore if the name of your items goes past that, then you end up with it being cut off (it actually wraps, and is hidden which is intentional). I fixed this with an 80/20 measurement. This is more or less only an issue if you want to take away one of the two prices. What if you want just one? (Granted, I hadn't looked at coma's other examples..maybe he did a better version than mine).
首先,如果你的菜单在更小的空间里,你会发现昏迷的代码会有一些缺陷。divs被设置为50%,因此,如果您的物品的名称超过了50%,那么您的物品就会被切断(它实际上是包装的,是隐藏的,这是有意的)。我用80/20的测量值修正了这个问题。这或多或少是一个问题,如果你想拿走其中一个价格。如果你只想要一个呢?当然,我没有看过昏迷的其他例子。也许他做了一个比我更好的版本)。
Also, I needed for my work to have a description line in some items...so I added that in there as well.
另外,我需要我的工作有一个描述线在一些项目……我把它也加进去了。
Small tweaks all around. Sorry if I've convoluted it further...but I couldn't actually fully understand why his example works anyway (well.. I understand 90%).
小调整。对不起,如果我把它弄得太复杂了……但是我还是不能完全理解他的例子为什么有效。我明白了90%)。
If it's appreciated, then just add a comment. Coma deserves the win on this one.
如果你很感激,那就加上一句。昏迷应该在这场比赛中获胜。
You can find my code here: http://jsfiddle.net/tFK68/1/
您可以在这里找到我的代码:http://jsfiddle.net/tFK68/1/。
CSS:
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;
}
Here's the markup:
这里的标记:
<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>