设置了HRef Float的样式，导致CSS无法正常工作

时间：2019-03-01 11:47:39

标签： html css twitter-bootstrap

我正在尝试使用样式化的HRef设计打印和发送按钮，以下是预期按钮的外观，但是我的浮动控件：右边不起作用。

期望

enter image description here

但这是经过大量试用后我得到的，因为浮动权不起作用

enter image description here 

/* 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>

4 个答案:

答案 0 :(得分：2)

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

编辑： 您还需要将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>

答案 1 :(得分：1)

你是这个意思吗？

要删除按钮上的浮点并在容器上使用文本对齐方式？

/* 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 {
  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;

}
.text-right { text-align:right }
<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>

在浏览器中显示结果

enter image description here

答案 2 :(得分：1)

删除浮动并使用引导程序类。

#send-btn { /* float: right; remove it */ }

更改此：

<div class="text-right">

对此：

<div class="col-md-12 text-right">

编辑-这没有您的任何CSS。检查一下：

    <html>
      <head>
        <meta charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      </head>
      <body>
        <div class="container-fluid">
          <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 class="col-md-12 text-right">
            <a href="javascript:window.print()" id="print-btn" class="btn btn-light"><i class="mdi mdi-printer print-ico"></i> Print</a>
            <a href="#" id="send-btn" class="btn btn-primary">Send</a>
          </div>
        </div>                                                  
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      </body>
    </html>

答案 3 :(得分：0)

	#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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <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="container-fluid">
  <div class="text-right">
    <a href="javascript:window.print()" id="print-btn" class="btn"><i class="mdi mdi-printer print-ico"></i> Print</a>
    <a href="#" id="send-btn">Send</a>
  </div>
</div>
	

<div class="container-fluid">

    45名学生中的第一名     化学专业的学生，​​但需要在其他学科上努力工作。   

        打印     发送   
相关问题
最新问题