divs放置和显示[关闭]答案

【问题标题】：divs placement and display [closed]divs放置和显示[关闭]
【发布时间】：2013-05-31 09:54:16
【问题描述】：

我正在尝试使用这种格式样式创建一个表单：

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

【问题讨论】：

您的表单几乎按照您的意愿布置，您只需要在标签 a、b 和 c 之后添加 <br />
如果您希望不同的提交只提交各自的字段，则需要使用多个<form> 元素。
我还建议您了解block、inline 和inline-block 元素之间的区别，然后您将更好地了解何时需要float 元素
谢谢@MadaraUchiha，很好的观察，我将使用两种形式。

标签： css forms html

【解决方案1】：

只需在div A 和div B 中添加特定于标签的规则

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

http://jsfiddle.net/emTKJ/的演示

【讨论】：

【解决方案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;
    }

您只需要为form label 添加一个display:block; 并为from 和to 添加一个<span> 标签，然后我将输入类型从submit 更改为button 并赋值为submit .您可以根据需要更改和设置样式。

希望这会有所帮助。

【讨论】：

谢谢。这在 jsFiddle 上效果很好，但在我的预览版上效果不佳，我不知道为什么。
你用什么来预览？ - @tonydanza。我在 Dreamweaver 预览版和浏览器上检查了代码，它运行良好。
我正在使用 Firefox，但正在使用 cq5。唯一的问题是选择输入类型，它仍然位于标签之后。
将display:block; 中的form label css 更改为display:table-cell;。
还是不行 :( 还是谢谢

【解决方案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;
}

【讨论】：