用点来填充两个文本元素之间的空间 [英] Fiill the space between two text elements with dots
问题描述
我试图找出如何自动填充两个对象之间的空间。我有菜单项和价格。
目标是这样的:
汉堡..... ..................... $ 9.99
牛排和
土豆......... $ 14.99
Mac和芝士.. ....... $ 6.99
菜单项和价格之间的间隔应该相同。
用户可以输入菜单项目和价格,我需要填写任何空间。
这是我尝试过的,但并不奏效:
.inLine {display:inline-block;}
< h1 class ='inLine menuItem'>汉堡< / h1> < span class ='inLine dots'> .....................< / span>< h3 class ='inLine price'> $ 9.99< / h3> < br>< h1 class ='inLine menuItem'>牛排< / h1> < span class ='inLine dots'> .....................< / span>< h3 class ='inLine price'> $ 14.99< / h3>< h1 class ='inLine menuItem'>地中海切碎的沙拉< / h1> < span class ='inLine dots'> .....................< / span>< h3 class ='inLine price'> $ 14.99< / h3>
无论项目名称有多长,都占用正确的空间量。我已经尝试将点设置为 width:100%
,但似乎没有这样做。有任何想法吗?
section {display:flex ; / * 1 * / align-items:baseline; / * 2 * / margin-bottom:10px;} section> * {padding:0; margin:0;} span {flex:1; / * 3 * / overflow:hidden; / * 4 * /}
< section> < H1>汉堡< / h1> <跨度> .............................................. .................................................. .................................................. ............< /跨度> < H3> $ 9.99< / h3>< / section>< section> < H1>牛排< / h1> <跨度> .................................................. .................................................. .................................................. ........< /跨度> < H3> $ 14.99< / h3>< / section>< section> < H1>地中海切碎的沙拉< / h1> <跨度> .................................................. .................................................. .................................................. ........< /跨度> < H3> $ 14.99< / h3>< / section>
- 建立flex容器。
- 将所有元素垂直对齐到基线。 $ b
- 点将占用线上所有可用空间。这会强制菜单项和价格到达容器的两端。
- 任何多余的点都在屏幕外剪辑。
您可以通过调整容器宽度轻松控制菜单项和价格之间的距离。在上面的示例中,宽度设置为100%(块级元素的默认值)。
当然,span元素中有很多点是相当丑陋。但这是一个基本的例子。您可以尝试使用伪元素或脚本来代替循环。
或者,您可以尝试使用虚线
或点
border 。
部分{display:flex;对齐项目:基线; margin-bottom:10px;} section> * {padding:0; margin:0;} span {flex:1; border-bottom:2px dotted#333;
< section> ; < H1>汉堡< / h1> <跨度>< /跨度> < H3> $ 9.99< / h3>< / section>< section> < H1>牛排< / h1> <跨度>< /跨度> < H3> $ 14.99< / h3>< / section>< section> < H1>地中海切碎的沙拉< / h1> <跨度>< /跨度> < H3> $ 14.99< / h3>< / section>
I'm trying to figure out how to automatically fill space between two objects. I have menu items and prices.
The goal is something like this:
Burger..........................$9.99
Steak and Potato.........$14.99
Mac and Cheese.........$6.99
The spacing between menu item and price should be the same. Users can enter the menu item and price and I need to fill in any space.
This is what I've tried but it doesn't quite work:
.inLine {
display: inline-block;
}
<h1 class='inLine menuItem'> Burger </h1>
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'> $9.99 </h3>
<br>
<h1 class='inLine menuItem'> Steak </h1>
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'> $14.99 </h3>
<h1 class='inLine menuItem'> Mediterranean Chopped Salad </h1>
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'> $14.99 </h3>
The issue is the dots need to take up the correct amount of space regardless of how long the item name is. I've tried setting the dots to width: 100%
but that does not seem to do it. Any ideas?
section {
display: flex; /* 1 */
align-items: baseline; /* 2 */
margin-bottom: 10px;
}
section > * {
padding: 0;
margin: 0;
}
span {
flex: 1; /* 3 */
overflow: hidden; /* 4 */
}
<section>
<h1> Burger </h1>
<span>..............................................................................................................................................................</span>
<h3> $9.99 </h3>
</section>
<section>
<h1> Steak </h1>
<span> ..............................................................................................................................................................</span>
<h3> $14.99 </h3>
</section>
<section>
<h1> Mediterranean Chopped Salad </h1>
<span> ..............................................................................................................................................................</span>
<h3> $14.99 </h3>
</section>
Notes:
- Establish flex container.
- Align all elements vertically to baseline.
- Dots will consume all available space on the line. This will force the menu item and price to opposite ends of the container.
- Any extra dots are clipped off-screen.
You can easily control the distance between the menu items and the price by adjusting the width of the container. In the example above, the width is set to 100% (the default for block-level elements).
Of course, having so many dots in your span elements is quite ugly. But this is a basic example. You could try using a pseudo-element or scripting a loop instead.
OR, you could try using a dashed
or dotted
border.
section {
display: flex;
align-items: baseline;
margin-bottom: 10px;
}
section > * {
padding: 0;
margin: 0;
}
span {
flex: 1;
border-bottom: 2px dotted #333;
<section>
<h1> Burger </h1>
<span></span>
<h3> $9.99 </h3>
</section>
<section>
<h1> Steak </h1>
<span></span>
<h3> $14.99 </h3>
</section>
<section>
<h1> Mediterranean Chopped Salad </h1>
<span></span>
<h3> $14.99 </h3>
</section>
这篇关于用点来填充两个文本元素之间的空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!