我正在尝试找出如何自动填充两个对象之间的空间。我有菜单项和价格。
目标是这样的:
Burger..........................$9.99
Steak and
Potato.........$14.99
Mac and Cheese.........$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% 但似乎并没有这样做。有任何想法吗？
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>
注意事项:
- 建立 flex 容器。
- 将所有元素与基线垂直对齐。
- 点将占用线上的所有可用空间。这将迫使菜单项和价格位于容器的两端。
- 任何多余的点都被剪掉了。
您可以通过调整容器的宽度轻松控制菜单项与价格之间的距离。在上面的示例中，宽度设置为 100%( block 级元素的默认值)。
当然，在你的 span 元素中有这么多点是很丑陋的。但这是一个基本的例子。您可以尝试使用伪元素或编写循环脚本。
或者，您可以尝试使用虚线 或点线 边框。
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>