Html 将两个div对齐到一个TH

我有一个

表

，我想在

th

中的文本右侧添加排序图标。这是我目前的代码：

---

我遇到的问题是，当列由于分辨率/浏览器窗口大小而减小时，

th

中的文本会移动到图标上方。如何使用CSS使文本始终位于图标左侧？

添加显示：内联块；到css中的.sortable

将文本和图标包装到

flex容器中

并使用

flexbox

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

---

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

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

---

像这样改变：

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

.sortable.label{
显示：内联；寻求代码帮助的问题必须包含在问题本身（最好是在堆栈片段中）中复制它所需的最短代码。虽然您提供了链接，但如果该链接无效，您的问题对其他将来有相同问题的用户将毫无价值。请参阅。我为链接到工作考试而道歉ple显示了我遇到的确切问题。代码已插入此处，因此现在它位于两个位置，而不是一个位置。我们不需要链接，因为我已说明了原因。与您的代表一起，您应该已经知道这一点。代码应在问题中…这是基本要求，
.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;
}