Question

我有点问题。这可能是愚蠢的，但我无法解决它。我有一张桌子，我希望有一个名为column的字符串，接下来要用两个箭头对它进行排序。我试着漂浮：左，但它没有反应。现在我的代码看起来像这样：

        <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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在flexbox

中使用css属性

我将以下css添加到.arrows

display: flex;
flex-direction: column;

以下是flexbox properties的完整指南：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

＆＃13;

.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;
  
  display: flex;
  flex-direction: column;
 }

＆＃13;

<table>
  <thead>
    <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>
  </thead>

</table>

＆＃13;

在表中划分

2 个答案: