0

いくつかの入力を含む Web フォームがあり、そのうちのいくつかは別の行の隣に配置され、他の入力は新しい行にあります。その例を示します:

<h3>Max and Min Value</h3>
Max: <input name=max_value type=number>* Min: <input name=min_value type=number>

<h3>Overall Value</h3>
Overall: <input name=overall type=number>

ブラウザウィンドウの幅が十分に広い場合は同じ行に配置し、そうでない場合はその位置max_valueでmin_value改行し*ます。float:leftそれらをラッパー要素で囲み、両方をスタイルするために使用することで、仕事を成し遂げることができることを理解しています。しかし、追加のスペーサー要素を導入しない限り、それはドキュメント全体の流れに影響を与えます。

ドキュメントの流れに影響を与えずにオプションの改行を作成する別の方法はありますか?

4

5 に答える 5

2

Min入力をdivでラップし、指定するdisplay: inline-blockと、次のトリックが実行されます。

<h3>Max and Min Value</h3> 
Max: <input name=max_value type=number>* <div style="display: inline-block">Min: <input name=min_value type=number></div>

<h3>Overall Value</h3> 
Overall: <input name=overall type=number>
于 2012-07-19T10:36:29.313 に答える
1

cssで改行を禁止することができます：

.nobr  { white-space:nowrap; }

したがって、結果のコードは次のようになります。

<h3>Max and Min Value</h3>
<span class="nobr">Max: <input name=max_value type=number></span> <span class="nobr">Min: <input name=min_value type=number></span>

<h3>Overall Value</h3>
Overall: <input name=overall type=number>
于 2012-07-19T10:42:22.340 に答える
1

white-space: nowrap入力とラベルを一緒に保持するために使用できます。

<html>
<head>
  <style type="text/css">
    label { white-space: nowrap; }
  </style>
</head>
<body>
  <h3>Max and Min Value</h3>
  <label>Max: <input name=max_value type=number>*</label> <label>Min: <input name=min_value type=number></label>
</body>
</html>
于 2012-07-19T10:41:15.817 に答える
0

あなたがする必要があるのは、新しいラッパー要素を左にフロートした後、タグにclear: left(またはboth) することだけだと思います。<h3>これでうまくいくはずです。

于 2012-07-19T10:43:28.580 に答える
0 
<style type='text/css'>
.block
{
display:inline-block;
padding-left:5px;
margin:5px 0px;
}
</style>

<h3>Max and Min Value</h3>
<div class='block'>Max: <input name=max_value type=number></div><div class='block'> Min: <input name=min_value type=number></div>


<h3>Overall Value</h3>
Overall: <input name=overall type=number>

これがうまくいくことを願っています。

于 2012-07-19T10:44:40.883 に答える