Question

我试图将两个输入字段并排放在一起，水平居中。我有两个问题，第一个问题是两个输入字段无论什么原因都会相互重叠。

我最接近解决这个问题的方法是使用“box-sizing：border-box”但不幸的是，它删除了填充因此改变了设计。第二个问题是我需要两个输入字段都在中心。

.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，并将高度增加到40px并将填充增加到12px

这里有一个更新的笔，只使用中间输入上的边框： 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;}

中心两个div并排联系

3 个答案: