2

私はcssを理解するために次の問題を抱えています。

登録フォームを持っています。その形式では、フィールドセットを使用します。ここで、各行の横に2つの入力フィールドを配置したいと思います。上記の各フィールドにもラベルが必要です。

だから私が達成したいのはそれです：

    label 1                         label 2
    _______________                 _______________ 
   (_______________)               (_______________)

    label 3                        label 4
    _______________                 _______________ 
   (_______________)               (_______________)

私はcssを初めて使用し、float＆clearを理解するのにいくつか問題があります。

この時点まで、私は次の構造を持っています：

           _______________              
label 1   (_______________)             
           _______________              
label 2   (_______________) 
           _______________              
label 3   (_______________) 
           _______________              
label 4   (_______________)

そしてここに私の考えがあります：

フィールドセットを特定の高さと幅に設定しています。

fieldset { height: 330px; width: 550px;}

その後、ラベルと入力デザインの情報を設定していました。

label { font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #ECECEC;
    text-decoration: none;
    width: 100px;
}
input {
    width: 250px;
    height: 25px;
    color:#bababa;
    padding:5px;
    font-size: 12px;
    -moz-border-radius: 6px;  
}

これまでのところ、デザインについてです。今、私はそれを達成したい横にある2つの列のために、これのそれぞれを浮かせる必要があると思います。だから私はこの2つのクラスを構築しました：

.fl { float: left; margin-bottom:15px;}
.fd { clear: left; margin-bottom:15px;}

クラスflfloatは、box1を、box2が左側にあるフローティングプロパティに設定することを意味します。fdクラスは次の行になります。box3が別の行に分割されるようにします。マージンは、各フィールド間にスペースを確保するためだけのものです。

私のhtmlで私はこのコードを手に入れました：

<form>
<fieldset>
<legend>Headline for fieldset</legend>
<ul>

<li class="fl">
<label for="label1">label 1</label>
<input type="text" id="label1" name="label1" tabindex="10" autocomplete="off">
</li>

<li class="fl">
<label for="label2">label2</label>
<input type="text" id="label2" name="label2" tabindex="20" autocomplete="off">
</li>

<li class="fd">
<label for="label3">label3</label>
<input type="text" id="label3" name="label3" tabindex="30" autocomplete="off">
</li>

<li class="fl">
<label for="label4">label4</label>
<input type="text" id="label4" name="label4" tabindex="40" autocomplete="off">
</li>

</ul>
</fieldset>
</form>

だから私は次の質問があります：

1.ラベルが入力フィールドの上に配置されるようにするにはどうすればよいですか？

2.どうすればそれらを横に配置するという主な目標を達成できますか？

3. 1行の入力フィールド間のスペースを調整するにはどうすればよいですか？

私を助けてくれる人がいたら、本当にありがたいです。どうもありがとう。

4

3 に答える 3

1

リスト内でフォーム コントロールを使用すると、意味上の問題がいくつかあります。しかし、ソリューションに到達する最も簡単な方法は、各<label><input>コンボを<div>then の位置にラップすること<div>です。テーブルとして使用することは、これを行うための非常に古い方法です。

CSS

form div.left {
 width: 20%;
 float: left;
 display: inline;
 }
form div.right {
 width: 20%;
 float: right;
 display: inline;
 }

HTML

<form>
<div class="left"><label for="one">Label one</label><br>
<input id="one"></div>
<div class="right"><label for="two">Label two</label><br>
<input id="two"></div>

またはをスパンで<br>ラップして配置するようなものを使用したくない場合は、おそらく空想にふけることができます。質問 3 について詳しく教えてください。<label><input>

于 2012-06-21T13:09:27.247 に答える
1

これがあなたが望むものだと思います：

fieldset { 
    height: 330px; 
    width: 580px;
}

label { 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #ECECEC;
    text-decoration: none;
    width: 100px;
    display: block;
}
input {
    width: 250px;
    height: 25px;
    color:#bababa;
    padding:5px;
    font-size: 12px;
    -moz-border-radius: 6px;
    margin-right: 15px;
}

.fl, .fd { 
    float: left; 
    margin-bottom:15px;
 }

編集: 実例: http://jsfiddle.net/7hMCN/

于 2012-06-21T13:11:18.570 に答える
0

問題 1 [および 2?])<br />新しい行要素を追加しました (ラベルを左にフロートさせたり、変更したりすることができますdisplay:block;)。

問題 3) :nth-of-type(odd)margin-right を使用して追加しました

フィドルの例はこちら

于 2012-06-21T13:24:12.437 に答える