-3

この書式設定スタイルでフォームを作成しようとしています:

label a
[input text] SUBMIT

label b
[select]

label c
label from [input text] label to [input texŧ] SUBMIT

これは、css コードを含む私の html です。

<style type="text/css">
    form {
        width:460px;
    }
    form label {
        font-size:12px;
        color:#666;
        cursor:auto !important;
    }

    form input[type=text] {
        padding:5px;
        height:30px;
        line-height:30px;
        width:370px;
        color:#333;
        font-size:14px;    
    }

    form select {
        padding:5px;
        height:30px;
        line-height:26px;
        width:370px;
        color:#333;
        font-size:12px;
        border:solid 1px #ccc;
        overflow:hidden;
    }

    form input[type=submit] {
        height:20px;
        width:20px;
        background: url("/mini_glass.png") no-repeat scroll 3px 3px transparent;
        border:none;
        cursor:pointer;
    }

</style>

<div class="margin_top_20">
    <form action="">
        <div>        
            <div id="A">
                <label>a</label>
                <input name="q" value="" type="text">  
                <input value="" type="submit">
            </div>
        </div>

        <div id="B">
            <label>b</label>
            <select></select>
        </div>

        <div id="C">
            <label>c</label>
            <div id="D">
                <label>from</label>
                <input name="from" value="" type="text" style="width:50px">

                <label>to</label>
                <input name="to" value="" type="text" style="width:50px">
                <input value="" type="submit">
            </div>
        </div>
    </form>
</div>

問題は、position や float などのプロパティを設定する必要があることだと思いますが、その方法がわかりません。一部の div には float:left プロパティを使用する必要がありますか? プロパティが機能する方法は、私にはあまり明確ではありません。

4

3 に答える 3

1

divA とdivBのラベルに固有のルールを追加するだけです

#A label, #B label { display:block}

http://jsfiddle.net/emTKJ/のデモ

于 2013-05-31T10:07:20.080 に答える
0

フォームと CSS にいくつかの変更を加えました。これが、必要な形式に応じた実用的なソリューションです。

HTML:

<div class="margin_top_20">
    <form action="">
        <div>        
            <div id="A">
                <label>a</label>
                <input name="q" value="" type="text">  
                <input value="submit" type="button">
            </div>
        </div>

        <div id="B">
            <label>b</label>
            <select></select>
        </div>

        <div id="C">
            <label>c</label>
            <div id="D">
                <span>from</span>
                <input name="from" value="" type="text" style="width:50px">

                <span>to</span>
                <input name="to" value="" type="text" style="width:50px">
                <input value="submit" type="button">
            </div>
        </div>
    </form>
</div>

CSS:

 form {
        width:460px;
    }
    form label {
        font-size:12px;
        color:#666;
        cursor:auto !important;
    display:block;
    }

    span{
        font-size:12px;
        color:#666;
        cursor:auto !important;
    }

    form input[type=text] {
        padding:5px;
        height:30px;
        line-height:30px;
        width:370px;
        color:#333;
        font-size:14px;    
    }

    form select {
        padding:5px;
        height:30px;
        line-height:26px;
        width:370px;
        color:#333;
        font-size:12px;
        border:solid 1px #ccc;
        overflow:hidden;
    }

    form input[type=submit] {
        height:20px;
        width:20px;
        background: url("/mini_glass.png") no-repeat scroll 3px 3px transparent;
        border:none;
        cursor:pointer;
    }

display:block;のform labelと の<span>タグを追加するだけで、入力タイプを から に変更fromし、値をに変更しました。要件に応じて変更してスタイルを設定できます。tosubmitbuttonsubmit

お役に立てれば。

于 2013-05-31T10:03:50.853 に答える
0

私の経験では、要素のグループを配置する場合は、div 要素でラップしてスタイルを設定する必要があります。スタイルが似ている要素がある場合は、同じクラスで追加します。フォームの幅を設定するべきではありません。フォーム内のコンテンツを div で囲み、スタイルを設定するだけです。ここでコードを修正しました。jsfiddle で完全なデモを見る

HTML

<div class="margin_top_20">
    <form action="">
        <div class="line">
            <div id="A">
                <div>
                    <label>Lable A</label>
                </div>
                <div>
                    <input name="q" value="" type="text" />
                    <input value="submit button" type="submit" />
                </div>
            </div>
        </div>
        <div class="line" id="B">
            <div><label>Label b</label></div>
            <div><select></select></div>
        </div>
        <div class="line" id="C">
            <div><label>Label c</label></div>
            <div id="D">
                <label>from</label>
                <input name="from" value="" type="text" style="width:50px" />
                <label>to</label>
                <input name="to" value="" type="text" style="width:50px" />
                <input value="submit button" type="submit" />
            </div>
        </div>
    </form>
</div>

CSS:

form {
}
.line{
    padding-top:5px;
}
form label {
    font-size:12px;
    color:#666;
    cursor:auto !important;
}
form input[type=text] {
    padding:5px;
    width:370px;
    color:#333;
    font-size:14px;
}
form select {
    padding:5px;
    width:370px;
    color:#333;
    font-size:12px;
    border:solid 1px #ccc;
    overflow:hidden;
}
form input[type=submit] {
    border:none;
    cursor:pointer;
}
于 2013-05-31T10:11:35.207 に答える