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

Question

我正在尝试弄清楚如何在两个对象之间自动填充 space。我有菜单项和价格。

目标是这样的：

Burger...........................99
Steak and Potato..........99
Mac and Cheese..........99

菜单项和价格之间的间距应该相同。用户可以输入菜单项和价格，我需要填写任意space。

这是我试过的方法，但效果不佳：

.inLine {
  display: inline-block;
}

 <h1 class='inLine menuItem'> Burger </h1> 
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'>  .99 </h3> 
<br>
<h1 class='inLine menuItem'> Steak </h1> 
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'>  .99 </h3>

<h1 class='inLine menuItem'> Mediterranean Chopped Salad </h1> 
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'>  .99 </h3>

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

Answer 1

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

Answer 2

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>  .99 </h3>
</section>
<section>
  <h1> Steak </h1>
  <span> ..............................................................................................................................................................</span>
  <h3>  .99 </h3>
</section>
<section>
  <h1> Mediterranean Chopped Salad </h1>
  <span> ..............................................................................................................................................................</span>
  <h3>  .99 </h3>
</section>

备注：

建立弹性容器。
将所有元素与基线垂直对齐。
点将消耗线上所有可用的 space。这将强制菜单项和价格到容器的两端。
所有多余的点都被剪掉了。

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

当然，在你的 span 元素中有这么多点是很丑的。但这是一个基本的例子。您可以尝试使用伪元素或编写循环脚本。

或者，您可以尝试使用 dashed 或 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>  .99 </h3>
</section>
<section>
  <h1> Steak </h1>
  <span></span>
  <h3>  .99 </h3>
</section>
<section>
  <h1> Mediterranean Chopped Salad </h1>
  <span></span>
  <h3>  .99 </h3>
</section>

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'>.99</span>
        </h1>

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

Fiill the space between two text elements with dots

html

javascript

css

jquery

space