-1
我目前有一個帶有1個按鈕的表單，如果我嘗試添加另一個按鈕，整個css都會被擰緊。表格中的2個按鈕
這是我希望它看起來像：http://prntscr.com/gfuvi8
但是，如果提交按鈕<a href="?do=fetch" class="button"><i class="fa fa-refresh"></i> Fetch Exchange</a>
下加入這一行這是我得到：http://prntscr.com/gfuwka
.tablesection {
\t padding: 20px;
\t border-left: 1px solid #e4e4e4;
\t border-right: 1px solid #e4e4e4;
\t border-bottom: 1px solid #e4e4e4;
\t background: #ffffff;
}
.tablesection label {
\t width: calc(50% - 10px);
\t float: left;
\t margin: 0px 0px 10px 0px;
}
.tablesection label:nth-child(odd) {
\t margin: 0px 20px 10px 0px;
}
.tablesection input, .tablesection select, .tablesection textarea {
\t width: calc(50% - 10px);
\t margin: 0px 0px 20px 0px;
\t padding: 10px;
\t display: block;
\t float: left;
\t border: 1px solid #cecece;
\t -webkit-border-radius: 0;
\t border-radius: 0;
}
.tablesection textarea {
\t resize: vertical;
}
.tablesection input:nth-child(odd), .tablesection select:nth-child(odd) {
\t margin: 0px 20px 20px 0px;
}
.tablesection input {
\t padding: 11px 10px;
\t width: calc(50% - 10px);
}
.tablesection input.submit {
\t width: auto;
\t border: 0px;
\t margin: 0px 0px 0px 0px;
\t background: #54809b;
\t color: #ffffff;
\t text-decoration: none;
\t display: block;
\t float: none;
\t font-size: 11px;
\t padding: 12px 20px;
\t -webkit-transition: background 0.5s linear;
\t -moz-transition: background 0.5s linear;
\t -ms-transition: background 0.5s linear;
\t -o-transition: background 0.5s linear;
\t transition: background 0.5s linear;
\t clear: both;
}
.tablesection input.submit:hover {
\t background: #4d758d;
}
.tablesection input.submit::before {
\t display: block;
\t content: ' ';
\t clear: both;
}<div class="tablesection">
\t <form action="" method="post">
\t
\t \t <label for="usd">USD</label>
\t \t <label for="cad">CAD</label>
\t \t <input id="usd" type="text" name="usd" value="<?php echo $siteUsd; ?>" maxlength="10" required="required" />
\t \t <input id="cad" type="text" name="cad" value="<?php echo $siteCad; ?>" maxlength="10" required="required" />
\t
\t \t <label for="gbp">GBP</label>
\t \t <label for="eur">EUR</label>
\t \t <input id="gbp" type="text" name="gbp" value="<?php echo $siteGbp; ?>" maxlength="10" required="required" />
\t \t <input id="eur" type="text" name="eur" value="<?php echo $siteEur; ?>" maxlength="10" required="required" />
\t \t
\t \t <label for="aud">AUD</label>
\t \t <label for=""></label>
\t \t <input id="aud" type="text" name="aud" value="<?php echo $siteAud; ?>" maxlength="10" required="required" />
\t <div class="clear">
\t </div>
\t <input type="submit" class="submit" value="Update Exchange Rates" />
\t <a href="?do=fetch" class="button"><i class="fa fa-refresh"></i> Fetch Exchange</a>
\t </form>
</div>.content a.button:first-of-type {
margin: 20px 0px 0px 0px;
}
.content a.button {
background: #54809b;
color: #ffffff;
text-decoration: none;
display: block;
float: left;
margin: 20px 0px 0px 16px;
font-size: 11px;
padding: 12px 20px;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
.content a.button:hover {
background: #4d758d;
}
.content a.button i {
margin: 0px 4px 0px 0px;
font-size: 10px;
}
剛好有2個按鈕是這樣的：
<a href="?do=search" class="button"><i class="fa fa-search"></i> Search Coupons</a>
<a href="?do=add" class="button"><i class="fa fa-plus"></i> Add Coupon</a>
那麼它的罰款，他們彼此接近的問題是在形式
這會發生什麼，當我嘗試最低限度verysion http://prntscr.com/gfw69i – empire
啊，浮動元素不會在計算高度時被考慮。您可以添加一個虛擬元素來填充它們覆蓋的空間，或者可以將它們更改爲'display：inline-block'而不處理浮動。更新我的答案 – Armando