2つのテキスト要素の間のスペースをドットで塗りつぶす

Question

2つのオブジェクト間のスペースを自動的に埋める方法を理解しようとしています。私はメニューアイテムと価格があります。

バーガー.......................... $ 9.99
ステーキとポテト ：

の目標は、このようなものです......... $ 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%にドットを設定しようとしましたが、それはそれをやっていないようです。何か案は？

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％（ブロックレベル要素のデフォルト）に設定されています。

もちろん、あなたのスパン要素に非常に多くのドットを持つことはかなり醜いです。しかし、これは基本的な例です。擬似要素を使用したり、ループをスクリプト化したりすることができます。

または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

フレックスボックスを試してみることもできます。真ん中に不必要なドットを入れ、単語分割をオフにして、overflow-x: hiddenにします。

Answer 3

ここでは、pur htmlとcss.Copy divで分類された項目を使用して、必要なものを追加します。

.item { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.descripcion { 
 
    /*background-color: green;*/ 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 

 
.descripcion:after { 
 
    content: " ..........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................." 
 
} 
 

 
.precio { 
 
    /*background-color: red;*/ 
 
    flex-shrink: 0; 
 
}

<div class="item"> 
 
    <div class='descripcion'>Burger</div> 
 
    <div class='precio'>$9.99 </div> 
 
</div> 
 
<div class="item"> 
 
    <div class='descripcion'>Steak and Potato</div> 
 
    <div class='precio'>$14.99</div> 
 
</div> 
 
<div class="item"> 
 
    <div class='descripcion'>Mac and Cheese</div> 
 
    <div class='precio'>$6.99</div> 
 
</div> 
 
<div class="item"> 
 
    <div class='descripcion'>Anything else</div> 
 
    <div class='precio'>1000rs</div> 
 
</div>

Answer 4

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