6

私のフィドルは問題をほとんど示しています。誰かが助けてくれれば、各テキスト ボックスの左側にラベルを配置しようとしています。http://jsfiddle.net/HC64Y/

<div id="boxalign2" class="boxalign2" >                 
    <label>Hospital*:</label><input class="rounded2" required title="Hospital is required!" name="MainHospital" type="text" />  
    <label>Title*:</label><input class="rounded2" name="MainTitle" type="text"/>            
    <label>Department*:</label> <input class="rounded2" name="MainDept" type="text"/>
</div>

CSS

input.rounded2 {
    border: 1px solid #ccc;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 2px 2px 3px #666;
    -webkit-box-shadow: 2px 2px 3px #666;
    box-shadow: 2px 2px 3px #666;
    font-size: 20px;
    padding: 4px 7px;
    outline: 0;
    -webkit-appearance: none;

    float: left;
    display: inline-block;
    clear: left;
    width: 150px;
    text-align: right;
}
4

4 に答える 4

8

入力を作成してinline-blockいますが、それらを左に浮かせています。

を削除して各入力の後float: leftに追加する<br>と、正しい動作が得られます。

http://jsfiddle.net/A8es3/

ボックスを整列するには、div各ラベル/入力の周りにラッパーを追加inline-blockし、固定幅のラベルを作成します。他にも方法はありますが、これは一つの方法です。

http://jsfiddle.net/A8es3/1/

stolli が述べたように、単にlabel要素をラッパーとして使用することもできます。

http://jsfiddle.net/A8es3/2/

于 2013-10-31T18:47:42.833 に答える
0

Jeff B の回答を修正して結果を得るには、css で要素に幅を与えるだけです。

label {width: 100px} ここで、「100」はレイアウトに最適な値です。

また、ラベルの主な目的は (ラベリングのための div またはスパンとは対照的に)、ラベルが関連付けられているコントロールの 2 番目のクリック ターゲットとして機能することです。したがって、要素をラベル タグ ( <label><input /></label>) でラップするか、id ( <label for="foo"><input id="foo"/>) で関連付けて、ユーザーがラベルをクリックするだけで、コントロールを切り替えたり、テキスト入力にフォーカスしたりできるようにします。タッチ デバイスのユーザビリティに大きな恩恵をもたらします。

于 2013-10-31T18:53:12.093 に答える