我目前有一个带有1个按钮的表单，如果我尝试添加另一个按钮，则整个css会被搞砸。
这就是我想要的样子：http://prntscr.com/gfuvi8
但是如果在提交按钮@import
这就是我得到的：http://prntscr.com/gfuwka
@font-face<a href="?do=fetch" class="button"><i class="fa fa-refresh"></i> Fetch Exchange</a>
.tablesection {
padding: 20px;
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
background: #ffffff;
}
.tablesection label {
width: calc(50% - 10px);
float: left;
margin: 0px 0px 10px 0px;
}
.tablesection label:nth-child(odd) {
margin: 0px 20px 10px 0px;
}
.tablesection input, .tablesection select, .tablesection textarea {
width: calc(50% - 10px);
margin: 0px 0px 20px 0px;
padding: 10px;
display: block;
float: left;
border: 1px solid #cecece;
-webkit-border-radius: 0;
border-radius: 0;
}
.tablesection textarea {
resize: vertical;
}
.tablesection input:nth-child(odd), .tablesection select:nth-child(odd) {
margin: 0px 20px 20px 0px;
}
.tablesection input {
padding: 11px 10px;
width: calc(50% - 10px);
}
.tablesection input.submit {
width: auto;
border: 0px;
margin: 0px 0px 0px 0px;
background: #54809b;
color: #ffffff;
text-decoration: none;
display: block;
float: none;
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;
clear: both;
}
.tablesection input.submit:hover {
background: #4d758d;
}
.tablesection input.submit::before {
display: block;
content: ' ';
clear: both;
}当只有这样的2个按钮时：
<div class="tablesection">
<form action="" method="post">
<label for="usd">USD</label>
<label for="cad">CAD</label>
<input id="usd" type="text" name="usd" value="<?php echo $siteUsd; ?>" maxlength="10" required="required" />
<input id="cad" type="text" name="cad" value="<?php echo $siteCad; ?>" maxlength="10" required="required" />
<label for="gbp">GBP</label>
<label for="eur">EUR</label>
<input id="gbp" type="text" name="gbp" value="<?php echo $siteGbp; ?>" maxlength="10" required="required" />
<input id="eur" type="text" name="eur" value="<?php echo $siteEur; ?>" maxlength="10" required="required" />
<label for="aud">AUD</label>
<label for=""></label>
<input id="aud" type="text" name="aud" value="<?php echo $siteAud; ?>" maxlength="10" required="required" />
<div class="clear">
</div>
<input type="submit" class="submit" value="Update Exchange Rates" />
<a href="?do=fetch" class="button"><i class="fa fa-refresh"></i> Fetch Exchange</a>
</form>
</div>然后很好，他们彼此接近，问题就在于形式
答案 0 :(得分：0)
您可以设置自己的位置relative并添加float样式：
.btn-float {
position: relative;
width: auto;
float: left;
padding-left: 15px;
}<input class="btn-left" type="submit" class="submit" value="Update Exchange Rates" />
<a class="btn-right" href="?do=fetch" class="button"><i class="fa fa-refresh"></i> Fetch Exchange</a>
答案 1 :(得分：0)
.button {
width: 23%;
display: block;
text-align: center;
line-height: 3rem;
height: 3rem;
font-size: 1.2rem;
border: 1px solid #ccc;
background: #fafafa;
}
.button-container{
margin-bottom: 20px;
width: 100%;
}
.button-container::after{
content: '';
display: block;
visibility: hidden;
clear: both;
}
.button-float{
margin-left: 2%;
float: left;
}<div class="button-container">
<button class="button button-float">BTN-1</button>
<button class="button button-float">BTN-2</button>
</div>
<div class="button-container">
<a href="?do=fetch" class="button button-float"><i class="fa fa-refresh"></i> Fetch Exchange</a>
<a href="?do=fetch" class="button button-float"><i class="fa fa-refresh"></i> Fetch Exchange</a>
</div>
我想我知道哪里出错了。
您应该将这两个按钮包裹在潜水或其他内容中，然后设置float left，然后清除DIV上的浮动。
如果你使用bootstrap，你可以将这些按钮包装在col-md-12
目标是让button浮动，然后清除其父容器上的浮动。
<强>加入
好的，只需在您的css文件中添加.button-container，.button-container::after，.button-float，然后使用div和.button-container类包装您的2个bt，添加{ {1}}等级到你的2 btns，这样做。
希望这可以帮到你。
答案 2 :(得分：0)
input.submit元素没有浮动，a.button是。{1}}。这会将a.button推到input.submit以下，并且边距不一致，因此如果没有发生，它们就不会对齐。我将建议两种方法来修复它，一种是最小的（只改变了两种css属性），另一种我认为更容易阅读和维护但是在某种程度上改变了CSS的结构。
对于任何一种方式，我建议改变边距。将16px边距放在右边消除了使用单独的规则从第一个元素中删除它的需要，并且溢出包含元素的边距无关紧要，因为在计算宽度和高度时它们不包括在内。
最小版本
第1步：将input.submit设置为float: left，就像.button
一样
第2步：更改input.submit的边距以匹配.button，反之亦然，
例如，input.submit {margin：20px 16px 0px 0px; }`
.tablesection input.submit {
width: auto;
border: 0px;
margin: 20px 16px 0px 0px; /* copy the a.button margins */
background: #54809b;
color: #ffffff;
text-decoration: none;
display: block;
float: left; /* left instead of none keeps subsequent floats on the same line */
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;
clear: both;
}
那会让他们内联，之后你可能想要将两者都设置为一致的高度。
更好（在我看来）版本
您在input.submit和a.button之间有很多共享样式 - 您可以考虑将这些样式合并到一个公共.button类中（注意此选择器中没有标记，这意味着该规则适用与班级的任何事情。）
在这里，我将设置一致的float: left;和一致的边距（例如20px 16px 0px 0px）
如果您仍然需要为input.submit执行特定样式，则可以为元素提供这两个类，它们将单独应用。
.content .button {
background: #54809b;
color: #ffffff;
text-decoration: none;
display: block;
float: left;
margin: 20px 16px 0px 0px;
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 .button:hover {
background: #4d758d;
}
.content .button i {
margin: 0px 4px 0px 0px;
font-size: 10px;
}
.tablesection input.submit {
/* Styles that are unique to input.submit */
}<div class ="content">
<div class="tablesection">
<input type="submit" class="button submit" value="Update Exchange Rates">
<a href="?do=fetch" class="button">
<i class="fa fa-refresh"></i>
Fetch Exchange
</a>
</div>
</div>
编辑：这两种解决方案共享一个缺陷，即浮动元素不会影响其容器的高度。要解决这个问题，您可以在它们之后放置一个虚拟元素来填充容器，例如：<div style="height:60px;"></div>。这种方法的重要之处在于虚拟div的高度与浮动元素的高度+上边距相同。
或者，您可以完全删除float:left并将两者都设置为display:inline-block，这比执行布局时浮动更容易。