用点来填充两个文本元素之间的空间 [英] 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>

1. 建立flex容器。


2. 将所有元素垂直对齐到基线。 $ b
3. 点将占用线上所有可用空间。这会强制菜单项和价格到达容器的两端。


4. 任何多余的点都在屏幕外剪辑。

您可以通过调整容器宽度轻松控制菜单项和价格之间的距离。在上面的示例中，宽度设置为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:

1. Establish flex container.
2. Align all elements vertically to baseline.
3. Dots will consume all available space on the line. This will force the menu item and price to opposite ends of the container.
4. 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屋！