1

検索しましたが、この投稿が最も近いですが、まったく同じではありません。パーセンテージ幅で、2つのスパンを隣り合わせにしようとしています。ただし、ユーザーの画面サイズやウィンドウのサイズ変更によってウィンドウの幅が狭くなると、ラベルと入力フィールドが個別に分離されます。ラベルと入力を1つの単位にして、ウィンドウを小さくすると、2番目のスパンが最初のスパンの下に折り返されるようにします。

HTML：

<span><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></span>
<span><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></span>​

CSS：

#startdate {
    width: 30%;
    display: inline-block;
}
#enddate {
    width: 30%;
    display: inline-block;
}​

これがフィドルです。サイズ変更機能をテストする場合は、センターバーを右に移動します。

4

1 に答える 1

1

修正済み：http：//jsfiddle.net/XceSq/1/

<div style="display:inline-block;"><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></div>
<div style="display:inline-block;"><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></div>​

要素はテキストコンテナであり、span達成しようとしている幅の要件をサポートしていません。ただし、このdiv要素はレイアウトコンテナであり、1つのブロック内に2つのオブジェクトを含めることができます。を使用display:inline-blockして、2つのコンテナが並んで表示されることを確認できます。

楽しんで頑張ってください！

于 2012-07-11T16:39:38.943 に答える