-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;
}
：
<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>
は、その罰金、その後、彼らはお互いに近い問題だがあなたがrelative自分のポジションを作り、floatスタイルを追加することができ、フォーム
これは私が最小限のバリエーションを試してみるとどうなるのですか？http://prntscr.com/gfw69i – empire
ああ、高さを計算するとき浮遊要素は考慮されません。ダミー要素を追加して、それらがカバーするスペースを埋め込むことができます。あるいは、 'display：inline-block'に変更して浮動小数点数を扱うことはできません。私の答えを更新する – Armando