html - 样式化了一个 HRef Float right 不工作 CSS

Question

我正在尝试使用样式化的 HRef 设计打印和发送按钮，下面是按钮的预期外观，但我的 float: right;不工作。

预期:

但这是我经过多次试验后得到的，因为 float: right;不工作:

/* CSS */

#print-btn {
  font-size: 16px;
  color: #27A9F8;
  background: #FFFFFF;
  border: 1px solid #27A9F8;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 11px 40px;
  margin-right: 15px;
}

#send-btn {
  float: right;
  font-size: 16px;
  text-transform: capitalize;
  color: #FFFFFF;
  background: #27A9F8;
  border: 1px solid #27A9F8;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 11px 40px;
  margin-right: 19px;
  margin-bottom: 22px;
}

<div class="row">
  <div class="col-md-12">
    <h2 class="result-remark">1st position in the class of 45 student’s</h2>
    <h3 id="teachers-remark">An execellent chemistry student, but needs to work hard on other subjects.</h3>
  </div>
</div>

<div class="row">
  <div class="text-right">
    <a href="javascript:window.print()" id="print-btn"><i class="mdi mdi-printer print-ico"></i> Print</a>
    <a href="#" id="send-btn">Send</a>
  </div>
</div>

Answer 1

您需要从 #send-btn 中删除 float: right;

编辑:您还需要将类 col-md-12 添加到父级。

#print-btn {
  font-size: 16px;
  color: #27A9F8;
  background: #FFFFFF;
  border: 1px solid #27A9F8;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 11px 40px;
  margin-right: 15px;
}

#send-btn {
// float: right;
  font-size: 16px;
  text-transform: capitalize;
  color: #FFFFFF;
  background: #27A9F8;
  border: 1px solid #27A9F8;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 11px 40px;
  margin-right: 19px;
  margin-bottom: 22px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-12">
    <h2 class="result-remark">1st position in the class of 45 student’s</h2>
    <h3 id="teachers-remark">An execellent chemistry student, but needs to work hard on other subjects.</h3>
  </div>
</div>

<div class="row">
  <div class="col-md-12 text-right">
    <a href="javascript:window.print()" id="print-btn"><i class="mdi mdi-printer print-ico"></i> Print</a>
    <a href="#" id="send-btn">Send</a>
  </div>
</div>