使用点填充两个文本元素之间的空间

Question

我想弄清楚如何自动填充两个对象之间的空间.我有菜单项和价格.

目标是这样的:

汉堡.......................... 9.99美元
牛排和土豆......... 14.99美元
Mac和奶酪...... ... $ 6.99

菜单项和价格之间的间距应该相同.用户可以输入菜单项和价格,我需要填写任何空格.

这是我尝试过但它不太有效:

.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>

问题是无论项目名称有多长,点都需要占用正确的空间.我已经尝试设置点,width: 100%但似乎没有这样做.有任何想法吗？

Answer 1

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>

笔记:

1. 建立flex容器.
2. 将所有元素垂直对齐到基线.
3. 点将占用线路上的所有可用空间.这将强制菜单项和价格到容器的两端.
4. 屏幕外任何额外的点都被剪掉了.

您可以通过调整容器的宽度轻松控制菜单项与价格之间的距离.在上面的示例中,宽度设置为100%(块级元素的默认值).

当然,在你的span元素中有这么多的点是非常难看的.但这是一个基本的例子.您可以尝试使用伪元素或编写循环脚本.

或者,你可以尝试使用dashed或dotted 边界.

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>