html - 窗体、输入文本相互: 50%, 间隙

Question

我有以下表格:

http://jsfiddle.net/LwJBz/

    <div id="contact">
        <div id="col2">
            <h3>Üzenetet küldök</h3>
            <form>
                <div>
<input type="text" name="Nev" placeholder="Név" /><input type="text" name="Email" placeholder="Email cím" /><br /><input type="text" name="Phone" placeholder="Telefonszám" />
                    <textarea placeholder="Üzenet"></textarea>
                    <input type="submit" value="Küldés" />
                    <img style="visibility: hidden;" src="{'place.gif'|lws_img}" alt="place icon" width="10" height="16" />
                </div>
            </form>
        </div>
        <div class="clearfix"></div>
    </div>

#contact #col2 input,textarea
{
    width: 100%;
    height: 61px;
    border: none;
    border-radius: 4px;
    color: #434343;
    font-family: rock;
    padding-left: 20px;
    font-size: 1.9em;
    margin: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#contact #col2 input[name=Nev]
{
    width: 50%;
    float: left;
    margin-right: 0px;
}
#contact #col2 input[name=Email]
{
    width: 50%;
    float: right;
    margin-left: 0px;
    margin-right: -10px;
}
#contact #col2 textarea
{
    padding-top: 20px;
    height: 143px;
}
#contact #col2 input[type="submit"]
{
    width: 156px;
    height: 57px;
    background-color: #EE4135;
    color: white;
}

body
{
    background-color: red;
    margin: 0;
    padding: 0;
}

我需要在“Nev”和“Email”输入字段之间留一个空隙，但我不知道。我很享受负利润率，但成功率较低

Answer 1

由于 border-box 属性不包含边距，我将输入包装在 div 中并对其应用填充，以便间隙全部相同且大小固定。

FIDDLE

HTML:

<div id="contact">
    <div id="col2">
         <h3>Üzenetet küldök</h3>

        <form>
            <div>
                <div class="float">
                    <input type="text" name="Nev" placeholder="Név" />
                </div>
                <div class="float">
                    <input type="text" name="Email" placeholder="Email cím" />
                </div>
                <div>
                    <input type="text" name="Phone" placeholder="Telefonszám" />
                </div>
                <div>
                    <textarea placeholder="Üzenet"></textarea>
                </div>
                <div>
                    <input type="submit" value="Küldés" />
                </div>
                <img style="visibility: hidden;" src="{'place.gif'|lws_img}" alt="place icon" width="10" height="16" />
            </div>
        </form>
    </div>
    <div class="clearfix"></div>
</div>

CSS:

#contact #col2 input, textarea {
    width: 100%;
    height: 61px;
    border:none;
    border-radius: 4px;
    color: #434343;
    font-family: rock;
    font-size: 1.9em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin:0;
    padding-left: 20px;
}
form div {
    width: 100%;
    padding:10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.float {
    width: 50%;
    display:inline-block;
}
#contact #col2 textarea {
    padding-top: 20px;
    height: 143px;
}
#contact #col2 input[type="submit"] {
    width: 156px;
    height: 57px;
    background-color: #EE4135;
    color: white;
}
body {
    background-color: red;
    margin: 0;
    padding: 0;
    width: 100%;
    height:100%;
}