Question

我设计了一个表单，并且我将名字和姓氏字段相互水平显示，如图所示。当用户单击该字段时，该字段将更改颜色（尚未编码）。

目前，如图所示，名字字段和姓氏字段之间存在间隙。我无法弄清楚这个差距来自哪里。

如何删除此间隙以使该字段占用所有空间？

HTML：

    <div class="topBox">
        <div class="closeModal">X</div>
        <div class="clear"></div>
        <div><img src="images/ProvenWordLogoSmall.png" alt="ProvenWord Logo"></div>
    </div>
    <div class="bottomBox">
        <h3>Free Quote Form</h3>
        <form class="freeQuoteForm">
            <div class="nameFields">
                <input type="text" id="firstName" placeholder="First Name" required>
                <input type="text" id="lastName" placeholder="Last Name" required>
            </div>
            <div class="nameFields">
                <input type="email" id="email" placeholder="Email Address" required>
            </div>
        </form>

    </div>
     <script type="text/javascript" src="main.js"></script>         
</body>

CSS：

.topBox {
    width: 640px;
    margin: 0 auto;
}

.bottomBox {
    background: white;
    margin: 30px auto;
    width: 640px;
    height: 595px;
    border: 1px solid #9c9c9c;;
}

.bottomBox h3 {
    text-align: center;
    padding: 20px 0;
}

.freeQuoteForm {
    width: 530px;
    height: 430px;
    border: 1px solid #9c9c9c;
    text-align: left;
}

input, textarea {
    font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 100;
    border: none;
}

input[type="text"], input[type="email"] {
    display: inline-block;
    width: 262px;
    height: 60px;
    padding: 0px;

}

input[type="email"] {
    width: 518px;
}

#lastName {
    border-left: 1px solid #9c9c9c;
}

.nameFields {
    border-bottom: 1px solid #9c9c9c;
}

Answer 1

我已将百分比用于输入字段。 “姓氏”字段有一个边框，因此需要将其设置为box-sizing: border-box:，否则它会下降到下一行。

.bottomBox {
    background: white;
    margin: 30px auto;
    width: 640px;
    height: 595px;
    border: 1px solid #9c9c9c;
    background: lightblue;
}

.bottomBox h3 {
    text-align: center;
    padding: 20px 0;
    background: cornflowerblue;
}

.freeQuoteForm {
    width: 530px;
    height: 430px;
    border: 1px solid #9c9c9c;
    text-align: left;
    background: skyblue;
}

input, textarea {
    font-family: "Sinkin Sans", Verdana, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 100;
    border: none;
}

input[type="text"] {
    display: inline-block;    
    height: 60px;
    padding: 0px;
}

input[type="email"] {
    height: 60px;
    padding: 0px;
}

#lastName, #firstName {
  padding-left: 5px;
  width: 50%; 
  box-sizing: border-box;
}

#email {
  padding-left: 5px;
  width: 100%;
  box-sizing: border-box;
}

#firstName:focus, #lastName:focus, #email:focus {
  background: paleturquoise; 
}

#lastName {
  margin-left: 0px;
  border-left: 1px solid #9c9c9c;
}

.nameFields {
  border-bottom: 1px solid #9c9c9c;
}

<div class="bottomBox">
<h3>Free Quote Form</h3>
<form class="freeQuoteForm">
<div class="nameFields"><input type="text" id="firstName" placeholder="First Name" required><input type="text" id="lastName" placeholder="Last Name" required></div>
<div class="nameFields">
<input type="email" id="email" placeholder="Email Address" required>
</div>
</form>
</div>

Answer 2

它是两个内联元素之间的new line字符。

How to remove the space between inline-block elements?

如何获取这两个表单字段以填充它们之间的空格

2 个答案: