-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>

我认为问题在于我应该设置诸如位置或浮动之类的属性，但我不明白如何。我应该对某些 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

以我的经验，当你想定位一组元素时，你应该用 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 回答
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 labeland 添加一个<span>标签，from然后to我将输入类型从 更改为submit，button并将其值设置为submit。您可以根据需要更改和设置样式。

希望这可以帮助。

于 2013-05-31T10:03:50.853 回答