CSSの使用可能なスペースに関連する中央のテキスト

Question

<div style="width: 300px">
<div id="one" style="float: left">saved</div><input type="submit" id="two" style="float: right" value="Submit" />
</div>

div＃oneを親divの左端と送信ボタンの左端の間のスペースの中央に配置したい。

Answer 1

さらにいくつかの方法：

<div style="width: 300px">
    <input type="submit" id="two" style="float: right" value="Submit" />
    <div id="one" style="text-align:center;">saved</div>
</div>

テキスト saved がコンテナ div の左端と送信ボタンの左端の中央にないことはわかりにくいです。

上記の正確なバージョンは次のとおりです。

<div style="width: 300px;">
    <input type="submit" id="two" style="float: right; width:64px;" value="Submit" />
    <div id="one" style="text-align:center;margin-right:64px;">saved</div>
</div>

Answer 2

ここをクリック

ただし、単に「保存」したい場合は、テキストを中央に配置するには、幅を#oneに指定する必要があると思います。例：

<div style="width: 300px">
<div id="one" style="float: left;text-align:center;width:80%">saved</div>
<input type="submit" id="two" style="float: right;width:20%" value="Submit" />
</div>

Answer 3

これはCSSの一般的な問題の例です。つまり、さまざまなレイアウトで「残りのスペース」を計算する方法がないということです。

（a）正確なレイアウトが必要な状況、および（b）フローティングアイテムのサイズがわからない状況に遭遇しました。

例：

  

[----残りのスペースの100％を占める入力フィールド----] [幅が不明なボタン]

これは可能であると思われますが、知る限りでは、これを実現するにはテーブルを使用する必要があります。 CSSには、今後これがどのように修正されるかについての提案すらありません。 ため息