html - 我尝试创建一个表单并使用 css 设置样式，但它似乎有边距或类似的东西，而且看起来不应该

Question

我创建了一个表单并将其放入一个 div 中。我希望“姓名”和“电子邮件”输入占 div 宽度的 50%。它们应该放在同一行上。
This is how it looks.
这是表单的 HTML 和 CSS:

<div class="contactDiv">
    <form name="contactform" method="post" action="send_form_email.php">
        <input type="text" name="firstname" id="nameInput" placeholder="name*">
        <input type="text" name="email" id="emailInput" placeholder="email*">
        <textarea name="message" placeholder="message*"></textarea>
    </form>
</div>  


div .contactDiv {
    width: 700px;
    padding: 0;
}

.contactDiv input {
    height: 30px;
    color: #595959;
    font-family: gothic, sans-serif;
    font-size: 0.95em;
    outline: none;
    margin: 0;
}

#nameInput {
    width: 50%;
    float: left;
}

#emailInput {
    width: 50%;
    float: right;
}

.contactDiv textarea {
    width: 100%;
    height: 100px;
    color: #595959;
    font-size: 0.95em;
    overflow: hidden;
    resize: none;
    font-family: gothic, sans-serif;
    outline: none;

}

fiddle :https://fiddle.jshell.net/ag1bsux4/

Answer 1

您在使宽度 > 50%/100% 时遇到框模型问题。添加 box-sizing: border-box; 到 .contactDiv input, .contactDiv textarea 将包含定义宽度内的填充/边框。

div .contactDiv {
    width: 700px;
    padding: 0;
}

.contactDiv input {
    height: 30px;
    color: #595959;
    font-family: gothic, sans-serif;
    font-size: 0.95em;
    outline: none;
    margin: 0;
}

#nameInput {
    width: 50%;
    float: left;
}

#emailInput {
    width: 50%;
    float: right;
}

.contactDiv textarea {
    width: 100%;
    height: 100px;
    color: #595959;
    font-size: 0.95em;
    overflow: hidden;
    resize: none;
    font-family: gothic, sans-serif;
    outline: none;
}
.contactDiv input, .contactDiv textarea {
  box-sizing: border-box;
}

<div class="contactDiv">
    <form name="contactform" method="post" action="send_form_email.php">
        <input type="text" name="firstname" id="nameInput" placeholder="name*">
        <input type="text" name="email" id="emailInput" placeholder="email*">
        <textarea name="message" placeholder="message*"></textarea>
    </form>
</div>