Button图标float:right失效：如何实现按钮文本左、图标右布局？

我有一个内嵌图标的Button，尝试通过CSS的float:right属性实现文本居左、图标居右的布局，但图标与文本仍处于居中状态。以下是对应的HTML代码：

<!DOCTYPE html> 
<html> 
<head> 
  <base href="https://demos.telerik.com/kendo-ui/button/index"> 
  <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
  <title></title> 
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-bootstrap.min.css" /> 
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.min.css" /> 
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.mobile.min.css" /> 
  <script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script> 
  <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script> 
</head> 
<body> 
  <div id="example"> 
    <div class="demo-section k-content"> 
      <div> 
        <h4>Basic Button</h4> 
        <p> 
          <button id="primaryTextButton" class="k-button" title="Example of tool tip!" >
            Primary Button 
            <span class="k-icon k-i-info">
          </button> 
          </span> 
        </p> 
      </div> 
      <script> 
        $(document).ready(function () { }); 
      </script> 
      <style> 
        .demo-section p { margin: 0 0 30px; line-height: 50px; } 
        .demo-section p .k-button { margin: 0 10px 0 0; } 
        .k-primary { min-width: 150px; } 
        .k-button { min-width: 400px; } 
        .k-icon{ padding: 10px; font-size: 32px; } 
      </style> 
    </div> 
  </div> 
</body> 
</html>

咱们来一步步解决这个问题，你当前的代码有几个关键问题需要修正：

1. 先修复HTML标签的错误 #

你看，代码里的<span class="k-icon k-i-info">不仅没闭合，还跑到了</button>标签的外面！这直接导致图标不在按钮容器里，肯定没法跟着按钮布局走。先把标签结构修正：

<button id="primaryTextButton" class="k-button" title="Example of tool tip!" >
  Primary Button 
  <span class="k-icon k-i-info"></span>
</button>

2. 覆盖Kendo按钮的默认居中样式 #

Kendo的.k-button默认会把内部内容居中对齐，所以你直接加float:right不会生效，得先把按钮的文本对齐方式改成左对齐，同时给图标留出右侧空间：

.k-button {
  min-width: 400px;
  text-align: left; /* 让按钮内文本靠左 */
  padding-right: 60px; /* 给图标留位置，避免贴在按钮边缘 */
}

3. 用更可靠的方式让图标靠右 #

float:right有时候会受按钮内联布局的影响，不如用绝对定位来得稳定，毕竟按钮是固定尺寸的容器。给图标设置绝对定位，同时垂直居中：

.k-icon{
  padding: 10px;
  font-size: 32px;
  position: absolute;
  right: 10px; /* 距离按钮右侧的距离 */
  top: 50%;
  transform: translateY(-50%); /* 让图标垂直居中 */
}

别忘了给按钮加上position:relative，这样图标才会相对于按钮定位：

.k-button {
  min-width: 400px;
  text-align: left;
  position: relative; /* 作为图标的定位父容器 */
  padding-right: 60px;
}

最终完整修正代码 #

把所有修改整合后，代码如下：

<!DOCTYPE html> 
<html> 
<head> 
  <base href="https://demos.telerik.com/kendo-ui/button/index"> 
  <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
  <title></title> 
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-bootstrap.min.css" /> 
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.min.css" /> 
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.mobile.min.css" /> 
  <script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script> 
  <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script> 
</head> 
<body> 
  <div id="example"> 
    <div class="demo-section k-content"> 
      <div> 
        <h4>Basic Button</h4> 
        <p> 
          <button id="primaryTextButton" class="k-button" title="Example of tool tip!" >
            Primary Button 
            <span class="k-icon k-i-info"></span>
          </button> 
        </p> 
      </div> 
      <script> 
        $(document).ready(function () { }); 
      </script> 
      <style> 
        .demo-section p { margin: 0 0 30px; line-height: 50px; } 
        .demo-section p .k-button { margin: 0 10px 0 0; } 
        .k-primary { min-width: 150px; } 
        .k-button { 
          min-width: 400px; 
          text-align: left; 
          position: relative; 
          padding-right: 60px; 
        } 
        .k-icon{ 
          padding: 10px; 
          font-size: 32px; 
          position: absolute; 
          right: 10px; 
          top: 50%; 
          transform: translateY(-50%); 
        } 
      </style> 
    </div> 
  </div> 
</body> 
</html>

这样修改后，按钮文本会靠左对齐，图标会稳稳地在按钮右侧并垂直居中，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Farukh