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

＆＃13;

section {
  display: flex;                     /* 1 */
  align-items: baseline;             /* 2 */
  margin-bottom: 10px;
}
section > * {
  padding: 0;
  margin: 0;
}
span {
  flex: 1;                          /* 3 */
  overflow: hidden;                 /* 4 */
}

＆＃13;

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

＆＃13;

注意：

建立弹性容器。
将所有元素垂直对齐到基线。
点将占用线路上的所有可用空间。这将强制菜单项和价格到容器的两端。
任何额外的点都会在屏幕外剪掉。

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

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

或者，您可以尝试使用dashed或dotted 边框。

＆＃13;

section {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
}
section > * {
  padding: 0;
  margin: 0;
}
span {
  flex: 1;
  border-bottom: 2px dotted #333;

＆＃13;

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

＆＃13;

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>

使用点

3 个答案: