Question

我有table，其中我想在th中的文字右侧添加排序图标。这是我目前的代码：

我遇到的问题是，由于分辨率/浏览器窗口大小导致列缩小，th中的文本会移到图标上方。如何使用CSS始终在图标左侧显示文本？

Answer 1

将文字和图标包装到const abc = requir(./abc); abc.foo1(); // this results in error // TypeError : abc.foo1 is not a function并使用flex-container

flexbox

CSS

<div class="flex-container">
  <div class="label">
    Order Number
  </div>
  <div class="sort-icons">
    <cfoutput>
      <div>
        <a href="?sortBy=OrderNumber&sortOrder=ASC" title="Sort Ascending"><span class="ui-icon ui-icon-circle-triangle-n"></span></a>
      </div>
      <div>
        <a href="?sortBy=OrderNumber&sortOrder=DESC" title="Sort Descending"><span class="ui-icon ui-icon-circle-triangle-s" style="display: block;"></span></a>
      </div>
    </cfoutput>
  </div>
</div>

<强> Updated Fiddle

Answer 2

添加display：inline-block;到css中的.sortable

Answer 3

您可以为每个元素定义最大宽度和浮点数，以便它们不会堆叠：

.sortable .label {
  display: inline;
  max-width:70%;  
  float:left;
  height: 39px;
  margin-right: 0.3em;
}

.sortable .sort-icons {
  max-width:30%;
  float: right;
  display: inline;
  width: 20px;
  height: 39px;
}

Answer 4

改变如下：

.sortable .label {
  display: inline;<------Change to inline-block;
  margin-right: 0.3em;<--------Remove
  width:85%;<------------Added
  float:left;<-----------Added
  height: 39px;

}

.sortable .sort-icons {
  float: right;<--------Remove
  display: inline;<------Change to inline-block;
  width: 15%;<------Added
  vertical-align: top;<----Added
  height: 39px;
}

Demo

在TH中对齐两个DIV

4 个答案: