Question

我正在尝试使用此格式样式创建表单：

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属性吗？财产的运作方式对我来说不是很清楚。

Answer 1

只需在div A和div B

中添加特定于标签的规则

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

http://jsfiddle.net/emTKJ/

演示

Answer 2

我对您的表单和CSS进行了一些更改，这里是Working Solution as per the format that you want.

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添加to标记，然后我从{{1}更改输入类型} {} submit，价值为button。您可以根据自己的要求更改和设置样式。

希望这有帮助。

Answer 3

根据我的经验，当你想要定位一组元素时，你应该用div元素包装它并设置它的样式。有些元素具有相似的样式，请使用相同的类添加它。不应该设置表单的宽度，只需用div设置内容并为其设置样式。我在这里修改你的代码。 See full demo in 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;
}

divs放置和显示

3 个答案: