Question

我想在输入的右上角放置一个图标。输入位于表格列（https://jsfiddle.net/3zLzfz04/）中这样做的最佳方法是什么？

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

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

dotnet build --help

查看此fiddle。

Answer 2

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

取决于你桌子的其余布局，但是如何在td上放置一个位置：相对于字体上的绝对图标和绝对的图标？

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>

字体真棒图标放在表格输入的右上角

3 个答案: