表格单元格内的Fontawesome水平图标对齐

Question

下面的html表在第一个单元格中具有图标。我正在尝试将它们水平对齐。我正在使用float:left，但它们仍然垂直出现

.mt-multiaccount-table {
  background-color: transparent;
  border: 1px solid #ddd;
}

.mt-multiaccount-table>thead>tr>th,
.mt-multiaccount-table>tbody>tr>td {
  padding: 5px;
  border: 1px solid #ddd;
}

.mt-multiaccount-table>tbody>tr>td>input {
  border: none;
  text-align: right;
}

<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet" />
<table class="mt-multiaccount-table">
  <thead>
    <tr>
      <th></th>
      <th>Col 1</th>
      <th>Col 1</th>
      <th>Col 1</th>
      <th>Col 1</th>
      <th>Col 1</th>
      <th>Col 1</th>
      <th>Col 1</th>
      <th>Col 1</th>
      <th>Col 1</th>
      <th>Col 1</th>
      <th>Col 1</th>
      <th>Col 1</th>
    </tr>
  </thead>
  <tbody style="background-color:white">
    <tr>
      <td>
        <div style="display:inline;float:left"><i class="fa fa-bomb"></i></div>
        <div style="display:inline;float:left"><i class="fas fa-address-book"></i></div>
        <div style="display:inline;float:left"><i class="fab fa-accessible-icon"></i></div>
      </td>
      <td><input readonly="" type="number" value=""></td>
      <td><input readonly="" type="text" value="RE"></td>
      <td><input readonly="" type="text" value="Ahjhj"></td>
      <td><input readonly="" type="text" value="554"></td>
      <td><input readonly="" type="text" value="554"></td>
      <td><input readonly="" type="text" value="554"></td>
      <td><input readonly="" type="text" value="554"></td>
      <td><input readonly="" type="text" value="554"></td>
      <td><input readonly="" type="text" value="554"></td>
      <td><input readonly="" type="text" value="554"></td>
      <td><input readonly="" type="text" value="554"></td>
      <td><input readonly="" type="text" value="554"></td>
    </tr>
  </tbody>
</table>

Answer 1

display flex在Chrome中工作

.mt-multiaccount-table {
    background-color: transparent;
    border: 1px solid #ddd;
}

        .mt-multiaccount-table > thead > tr > th,
        .mt-multiaccount-table > tbody > tr > td {
            padding: 5px;
            border: 1px solid #ddd;
        }

    .mt-multiaccount-table > tbody > tr > td > input {
        border: none;
        text-align: right;
    }

<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>
<table class="mt-multiaccount-table">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Col 1</th>
            <th>Col 1</th>
            <th>Col 1</th>
            <th>Col 1</th>
            <th>Col 1</th>
            <th>Col 1</th>
            <th>Col 1</th>
            <th>Col 1</th>
            <th>Col 1</th>
            <th>Col 1</th>
            <th>Col 1</th>
            <th>Col 1</th>
        </tr>
    </thead>
    <tbody style="background-color:white">
            <tr>
                <td style="display:flex">                  
                      <i class="fa fa-bomb"></i><i class="fas fa-address-book"></i><i class="fab fa-accessible-icon"></i>                                  
                </td>
                <td><input class="sm" readonly="" type="number" value=""></td>
                <td><input class="md" readonly="" type="text" value="RE"></td>
                <td><input readonly="" type="text" value="Ahjhj"></td>
                <td><input readonly="" type="text" value="554"></td>
                <td><input readonly="" type="text" value="554"></td>                
                <td><input readonly="" type="text" value="554"></td>
                <td><input readonly="" type="text" value="554"></td>
                <td><input readonly="" type="text" value="554"></td>
                <td><input readonly="" type="text" value="554"></td>
                <td><input readonly="" type="text" value="554"></td>
                <td><input readonly="" type="text" value="554"></td>
                <td><input readonly="" type="text" value="554"></td>
            </tr>
    </tbody>
</table>