中心两个div并排在联系形式

Question

我试图把两个输入字段并排放在中间，并以水平对中。我有两个问题，第一个问题是两个输入字段由于任何原因相互重叠。

我最接近解决这个问题的方法是使用“框大小:边框”，但不幸的是，这消除了填充，从而改变了设计。第二个问题是，我需要两个输入字段都位于中间。

​

.quote-page .contact .box {
  width: 70%;
}

.quote-page .contact .box .left {
  float: left;
  width: 50%;
}

.quote-page .contact .box .right {
  float: left;
  width: 50%;
}

.quote-page .form-2 {
  position: relative;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.8);
  color: rgb(77, 77, 77);
  border: none;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  line-height: 1.42857143;
  height: 30px;
  width: 100%;
  margin: 10px 0 10px 0;
  padding: 6px 12px;
}

<div class="box">
  <div class="left">
    <input name="email" type="email" class="form-2">
  </div>
  <div class="right">
    <input name="email" type="email" class="form-2">
  </div>
</div>

​

下面是完整的脚本，您可以看到问题所在：

https://codepen.io/anon/pen/BdQqeN

Answer 1

您有了正确的想法，但不幸的是，无论您是否使用box-sizing: border-box;，您都将对正在创建的内容进行额外的调整。

它表现得很有趣的原因是因为没有边框，你就会超过100%的宽度。

为了创建您想要的内容，我调整了以下内容：

• 更改.box的宽度
• 向overflow: hidden;添加了一个.box，以防止它与浮动的子级一起崩溃。
• 将margin: 0 auto;添加到.box的中心
• 将.box .left的宽度更改为width: 49%;和margin-right: 1%; (假设您需要输入之间的空间)
• 与上述项目相同，但适用于.box .right
• 将box-sizing: border-box添加到.form-2中，并将高度增加到40 to和12 to。

这里有一个更新的笔，它使用中间输入的边框：https://codepen.io/anon/pen/YxpRVK

CSS

.quote-page .contact .box {
  width: 73.5%;
  overflow: hidden;
  margin: 0 auto;
}
.quote-page .contact .box .left {
  float: left;
  width: 49%;
  margin-right: 1%;
}
.quote-page .contact .box .right {
  float: left;
  width: 49%;
  margin-left: 1%;
}
.quote-page .form-2 {
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.8);
  color: rgb(77, 77, 77);
  /*border: 1px solid #ccc;*/
  border: none;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  line-height: 1.42857143;
  height: 40px;
  width: 100%;
  margin: 10px 0 10px 0;
  padding: 12px;
}

HTML (无更改)

<div class="box">
   <div class="left">
      <input name="email" type="email" class="form-2" placeholder="Enter your email" required="">
   </div>
   <div class="right">
      <input name="email" type="email" class="form-2" placeholder="Enter your email" required="">
   </div>
</div>

Answer 2

几乎看不见，但它们在中间和旁边。

我在.quote-page类中添加了div。您在CSS中引用了它，但是在HTML中却缺少了它。这里是设置为100%宽度的顶部元素。

div.box元素通过margin: 0 auto居中。

​

.quote-page {
  width: 100%;
}

.quote-page .box {
  margin: 0 auto;
  width: 70%;
  display: flex;
}

.quote-page .contact .box .left {
  width: 50%;
}

.quote-page .contact .box .right {
  width: 50%;
}

.quote-page .form-2 {
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.8);
  color: rgb(77, 77, 77);
  border: none;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  line-height: 1.42857143;
  height: 30px;
  margin: 10px 0 10px 0;
  padding: 6px 12px;
}

<div class="quote-page">
  <div class="box">
    <div class="left">
      <input name="email" type="email" class="form-2">
    </div>
    <div class="right">
      <input name="email" type="email" class="form-2">
    </div>
  </div>
</div>

​

Answer 3

最简单的方法..。

添加css

.box {text-align: center;}
.left, .right {display:inline-block;}