用点填充两个文本元素之间的空间[重复]

Question

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

目标是这样的：

汉堡…………$9.99
牛排和 土豆.........$14.99
通心粉和奶酪............$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. 建立弹性容器。
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>

Answer 2

你可以试试 flexbox。用不必要的点填充中间，关闭分词，并使用overflow-x: hidden。

Answer 3

	
h1.menuItem {
  position: relative;
  display: inline-block;
  width: 350px;
  font-size: 14px;
  text-align: justify;
  text-align-last: justify;
  border-bottom: #000000 dotted 2px;
  background: #ffffff;
}
span.good-name {
  display: inline-block;
  height: inherit;
  line-height: inherit;
  position: absolute;
  left: 0;
  bottom: -5px;
  background: inherit;
  padding-right: 5px;
  text-align: left;
  text-align-last: left;
  -moz-text-align-last: left;
}
span.price {
  display: inline-block;
  height: inherit;
  line-height: inherit;
  background: inherit;
  position: absolute;
  right: 0;
  bottom: -5px;
  padding-left: 3px;
  text-align: left;
  text-align-last: left;
  -moz-text-align-last: left;
  width: 50px;
}

 <h1 class='inLine menuItem'>
            <span class='good-name'>Burger</span>
            <span class='price'>$9.99</span>
        </h1>