字体真棒图标位于 table 内输入的右上角

Question

我想要一个图标放置在我输入的右上角。输入在 table 列内 (https://jsfiddle.net/3zLzfz04/)
这样做的最佳方法是什么？

带有输入样式的示例代码： HTML:

.inpHours{
    font-weight: 500;
    text-align: right;
    font-size: 14px;
    border-style: solid;
    border-width: thin;
    height: 47px;
    width: 47px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<table id="sample-table">
<tbody>
  <tr>
    <td class="hours_entered">
       <input class="inpHours" type="number"/>
       <i class="fa fa-check-circle-o status-icon"></i>
    </td>    
  </tr>
</tbody>
</table>

Answer 1

取决于您 table 的其余布局，但是在 td 上放置一个 position:relative 并在 font awesome 图标上放置一个 absolute 怎么样？

https://jsfiddle.net/3zLzfz04/1/

.hours_entered {
  position: relative;
}

.within {
  position: absolute;
  right: 5px;
  top: 5px;
}

并且：

<table id="sample-table">
<tbody>
  <tr>
    <td class="hours_entered">
       <input class="inpHours" type="number"/>
       <i class="fa fa-check-circle-o status-icon within"></i>
    </td>    
  </tr>
</tbody>
</table>

Answer 2

只需将此添加到您的 CSS 代码中：

.hours_entered > i {
    position: absolute;
    top: 12px;
    left: 44px;
}

看看这个 fiddle。

Answer 3

tr td.hours_entered{
  position: relative;
}

.inpHours{
    font-weight: 500;
    text-align: right;
    font-size: 14px;
    border-style: solid;
    border-width: thin;
    height: 47px;
    width: 47px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

tr td.hours_entered .status-icon{
  position: absolute;
  top: 0;
  left: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<table id="sample-table">
<tbody>
  <tr>
    <td class="hours_entered">
       <input class="inpHours" type="number"/>
       <i class="fa fa-check-circle-o status-icon"></i>
    </td>    
  </tr>
</tbody>
</table>

字体真棒图标位于 table 内输入的右上角

Font awesome icon placed top right corner of input within table

css

input

font-awesome