入力ボックスが正しく整列していない

あまりにも曖昧なタイトルで申し訳ありませんが、私は自分の問題についてより良い説明を考え出すことができませんでした。 INPUT2はフロートを持っているとして、私は両方の入力ボックスが左揃えすることが期待される、いくつかの簡単なスタイリングこれにより入力ボックスが正しく整列していない

.label{float:left} 
.textbox{float:right;width:75%} 
.div{float:right;width:75%}

と

<html> 
<FIELDSET> 
    <DIV> 
     <SPAN class="label">Label 1</SPAN> 
     <DIV class="div"> 
      <input id="input1" value="The first input box"> 
     </DIV> 
    </DIV> 
    </FIELDSET>  

    <FIELDSET> 
     <DIV> 
      <SPAN class="label">Label 2</SPAN> 
      <INPUT id ="input2" class="textbox" value="the second input box"> 
     </DIV> 
    </FIELDSET> 
</html>

：

私は、単純なHTMLフォームを持っている権利を幅75％で、入力1の親divも同じ幅の右浮動です。しかし、あなたが正しく整列していない、と私はなぜわからない。 IE8とFireFox 9でテスト済み - jsfiddleリンク： http://jsfiddle.net/nrF2W/

注：私が持っていた問題をまだ示している最も簡単な例を作ろうとしました。最初の入力ボックスを含むdivは、1つ以上の入力ボックスを持つことを意図しています。

編集：言うが、例えば初期入力div要素は次のようになります。

同じ行にあるチェックボックスに続いて、入力ボックス、ある

<DIV class="div"> 
    <input value="1"> 
    <input type="checkbox"> 
</DIV>

。この状況では、入力ボックスの幅を75％に設定しても機能しません。わかりやすくするため、入力ボックスの長さではなく、問題のある入力ボックスの長さではなく、左側に配置が不十分です。

出典

2012-01-17 John

2つの全く関係のない入力を意味しますか？入力が何らかの方法で関連している場合は、おそらく同じフィールドセット内にあるはずです。あなたは間違いなく、別のフィールドセットにしたいですか？ – Deadlykipper

はい、各フィールドセットの入力は完全に無関係であると考えられます。 – John

私はちょうどあなたのフィーリングの例を見て、 'div：'の 'width：75％'が 'div'の幅と一致しないことを発見しました' fieldset' 'あなたはこれを達成することができます.. – Murtaza

http://jsfiddle.net/nrF2W/2/

あなたは上のdiv要素にプロパティを設定しているので、彼らがラインアップしていないだけではdivのため、入力しないため

出典

2012-01-17 12:12:35 giker

これは、div内の単一の入力ボックスでうまく動作しますが、それ以外のものが追加されていない場合はうまく動作しません。私はOPに編集を加えました。 – John

変更.div{float:right;width:75%}

.div input{float:right;width:75%}から

出典

2012-01-17 12:11:46 Alex

を75％を持っていました一方は手で、もう一方はinput要素です。しかし、これを修正しても、デザインは堅牢ではありません。ラベルが長くてブラウザウィンドウが非常に狭いまたは非常に広い場合に何が起こるかをチェックしてください。

より堅牢なアプローチは、ある列にラベルを付け、別の列にラベルを付けて表を使用することです。最初の列は自動的に必要な幅になり、75％のような任意の推測を行う必要はありません。

出典

2012-01-17 12:19:52

このお試しください：それはdiv要素ではありませんhttp://jsfiddle.net/YE288/11/

はそれ以上だ - 私はフォーム要素のリストを使用して好みます。しかし、それはあなたがあなたのレーベルをどのくらい広げているかに応じて並べられます。

EDIT：私の例を使用して、ラベルのサイズへの入力を揃えます。これは、入力のための均一なpoitionを作成する - 私はあなたが余分なdivを使用することを主張しているのか分からない。

出典

2012-01-17 12:37:46 Deadlykipper

入力ボックスが正しく整列していない

答えて

関連する問題