html - 表中的 Div

Question

我有个小问题。这可能很愚蠢，但我无法解决。我有一个表 th，在 th 中我想要一个带有列名称的字符串，然后是这两个箭头来对其进行排序。我试着做 float:left 但它没有反应。现在我的代码如下所示:

        <tr>
          <th >
             <div>
                <div class='columnName'>Column name</div>
                            <div class='arrows'>
                                <div class="arrow-up-icon"></div>
                                <div class="arrow-down-icon"></div>
                            </div>
             </div>
          </th>
        </tr>

这是我的 CSS:

.arrow-up-icon {
  background-image: url('here url code');
  background-size: contain;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  float: left;
  cursor: pointer;
  border:1px solid red;
}

.arrow-down-icon {
  background-image: url('');
  background-size: contain;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  float: left;
  cursor: pointer;
  border:1px solid black;
}

.columnName {
  float: left;
 }

.arrows {
  float: left;
 }

Answer 1

.arrow-up-icon {
  cursor: pointer;
  float: left;
}

.arrow-up-icon:before {
  content: '↑';
}

.arrow-down-icon {
  cursor: pointer;
  float: right;
}

.arrow-down-icon:before {
  content:'↓';
}

.columnName, .arrows {
  display: inline;
  float: left;
 }

        <table>
        
        <tr>
          <th >
             <div>
                <div class='columnName'>Column name</div>
                            <div class='arrows'>
                                <div class="arrow-up-icon"></div>
                                <div class="arrow-down-icon"></div>
                            </div>
             </div>
          </th>
        </tr>
        </table>