中心兩個div並排接觸形式

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，並且是一個使用更新的筆高度40像素和填充增加到12像素

這裏在剛剛你的中間投入邊界框： 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;}