Question

我创建了一个表单并将其放入div中。我想要＆＃34;名称＆＃34;和＆＃34;电子邮件＆＃34;输入占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;

}

小提琴：https://fiddle.jshell.net/ag1bsux4/

Answer 1

你有箱子模型问题，宽度＆gt; 50％/ 100％。将box-sizing: border-box;添加到.contactDiv input, .contactDiv textarea将在定义的宽度内包含填充/边框。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是因为输入的边框宽度。您可以设置较小的宽度％，如49％，并且可以工作。或者将输入样式更改为box-sizing: border-box;，因此宽度将相对于包括边框在内的所有元素。 ;）或最佳做法是：

html {
  box-sizing: border-box;
}

Answer 3

您缺少需要设置box-sizing：border-box;如果您想对齐输入框以允许在每个输入的总宽度中考虑应用于输入框的默认边框。

<强> CSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

<强> CODEPEN

http://codepen.io/alexincarnati/pen/zNEPoW

我尝试创建一个表单并用css设置它的样式，但它似乎有一个边缘或类似的东西，它看起来不应该如何应该

3 个答案: