同一行内において無限に伸びる横線を書きたい

Question

数学において数式に番号を付ける際、
y=f(x) ---------------- (1)
みたいな感じで横に伸びる線を書くことはよくありますが、HTML上でこれを実現したいです。

素朴に思いついたものとしては

<ul>
	<li>y=f(x)<hr style="display:inline" /><span style="float:right">(1)</span></li>
</ul>

ですが、これは正しく機能しません。
どうすれば良いですか？

要望としては

• ブラウザのサイズに応じて自由に(無限に)伸縮する横線で、

数式番号(上の例で言えば(1))へ繋がる横線(くっついていても、いなくてもどちらでもいい)

• きちんと一行に収まる。改行していびつな形になるのはダメ

です。

Comments

[m.ts10806]

styleと入れている時点でCSSが関係するので「CSS」もタグに入れておいてください。

Answer 1

Flex ボックスを使ってはいかがでしょう。

<ul>
  <li style="display: flex; width: 100%;">
    <span>y=f(x)</span>
    <span style="flex-grow: 1;"><hr /></span>
    <span>(1)</span>
  </li>
</ul>

ポイントは、親要素に display: flex を指定し、横線要素に flex-grow を設定することです。
そうすることで、他の要素は元の幅で、 flex-grow を設定した要素のみが横幅に応じて伸長します。

Comments

[oikashinoa]

これ良いですね。ただ<ul>のドット　表示します？
私のchromeだと出なかったんですが。

[R.Mizukami]

すみませんが表示しません。横線の伸ばし方さえわかればよいかなと……
display : listitem-item が flex-item で上書きされてしまうため、ドットが消えています。
ドットが必要なら、 li 要素の下に div タグを用意し、代わりにそちらにスタイルを適用するとか、
li::before{ content: "・" } スタイルを適用するとか、適当に工夫してください。
応用が利くよう、回答に簡単な解説を追加しておきました。

Answer 2

２つ目の線のような感じですか？CSSだけで可能ですよ

Comments

[oikashinoa]

数式はあまり見る機会がないのでイメージ湧きませんが、
目次などで表題とページ数を結ぶ線　のイメージですかね。

f(x)と(1)の間が短くても長くても切れ目なし、折り返し無しで繋ぐ線　ってかんじですか？

Answer 3

• canvas チュートリアル - ウェブデベロッパーガイド | MDN
• SVG: Scalable Vector Graphics | MDN

Re: infologicmation さん

Answer 4

方法はいくつかありますが、「think49」さんのリンク先を使えるようになるのが、今後のためにも良いかと思います。

･･･簡単に少し強引な「border-style」での方法もあります･･･

<div class="flex">
  <div>y=f(x)</div>
  <div class="dotted-line"></div>
  <div>(1)</div>
</div>

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

.dotted-line {
  width: 95%;
  height: 0.5em;
  border-bottom: dotted 1px #000;
}