认为您需要JS。这是一个答案，应该满足5以外的所有条件。
const debounce = fn => {
let frame;
return (...params) => {
if (frame) {
cancelAnimationFrame(frame);
}
frame = requestAnimationFrame(() => {
fn(...params);
});
};
};
const text = [...document.querySelectorAll(".text")];
const iconWidth = "1.25rem";
const positionIcon = () => {
if (!text) return;
text.forEach(t => {
const width = t.getBoundingClientRect().width;
const icon = t.nextElementSibling;
if (!icon) return;
icon.style.left = `calc(${width}px + ${iconWidth})`;
});
};
positionIcon();
window.addEventListener("resize",debounce(positionIcon));
.table {
border-collapse: collapse;
width: 100%;
}
.thead {
border-bottom: 3px solid #d0d3d3;
}
.thead .tr {
vertical-align: bottom;
}
.button {
padding: 1rem;
text-align: start;
font-family: Arial,"noto sans",sans-serif;
font-size: 0.875rem;
border: 0;
background-color: transparent;
width: 100%;
font-weight: bold;
line-height: 1.4;
position: relative;
}
.sort {
width: 1.25rem;
height: 1.25rem;
position: absolute;
bottom: 1rem;
left: 100%; /* no js fallback */
}
.sort svg {
height: 1.25rem;
width: 1.25rem;
}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<svg id="arrow" viewBox="0 0 24 24" role="presentation"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
</svg>
<table class="table">
<thead class="thead">
<tr class="tr">
<th class="th">
<button class="button">
<span class="text">Age</span>
<span class="sort">
<svg>
<use xlink:href="#arrow">
</svg>
</span>
</button>
</th>
<th class="th">
<button class="button">
<span class="text">Favourite Food</span>
<span class="sort">
<svg>
<use xlink:href="#arrow">
</svg>
</span>
</button>
</th>
<th class="th" aria-sort="ascending">
<button class="button">
<span class="text">Favorite Color</span>
<span class="sort">
<svg>
<use xlink:href="#arrow">
</svg>
</span>
</button>
</th>
<th class="th">
<button class="button">
<span class="text">Likes Neil Diamond?</span>
<span class="sort">
<svg>
<use xlink:href="#arrow">
</svg>
</span>
</button>
</th>
</tr>
</thead>
</table>
,
我认为您几乎不错，并且缺少（3）的技巧。一种想法是使图标元素的宽度等于0，并禁用文本和排序图标之间的任何空格。为此，我为文本使用了额外的包装，并删除了flexbox。
您将有一些溢出，但这不是问题，因为您正在应用填充。您还可以根据需要增加padding-right
.table {
border-collapse: collapse;
width: 100%;
}
.thead {
border-bottom: 3px solid #d0d3d3;
}
.thead .tr {
vertical-align: bottom;
}
.button {
padding: 1rem;
text-align: start;
font-family: Arial,sans-serif;
font-size:0;
border: 0;
background-color: transparent;
width: 100%;
font-weight: bold;
line-height: 1.4;
}
.button > span {
font-size: 0.875rem;
}
.sort {
width: 0;
height: 1.25rem;
display: inline-block;
vertical-align: bottom;
}
<table class="table">
<thead class="thead">
<tr class="tr">
<th class="th">
<button class="button">
<span>Age</span>
<span class="sort"></span>
</button>
</th>
<th class="th">
<button class="button">
<span>Favorite Food</span>
<span class="sort"></span>
</button>
</th>
<th class="th" aria-sort="ascending">
<button class="button">
<span>Favorite Color</span>
<span class="sort">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
</span>
</button>
</th>
<th class="th">
<button class="button">
<span>Likes Neil Diamond?</span>
<span class="sort"></span>
</button>
</th>
</tr>
</thead>
</table>
,
如果您的thead标题不是动态标题，那么我的修复非常简单。
为此，您必须将span的标题和svg图标的最后一个词放在一起
例如：-html
<button>
Long
<span> title
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
</span>
</button>
从.button类中删除display：flex
并给样式显示：行内遮挡添加的跨度
由于跨度是行内阻止，因此svg图标将永远不在单独的行中。前面至少有一个字
,
您可以尝试这样：
<style>
.table {
border-collapse: collapse;
width: 100%;
}
.thead {
border-bottom: 3px solid #d0d3d3;
}
.thead .tr {
vertical-align: bottom;
}
.button {
padding: 1rem;
text-align: start;
font-family: Arial,sans-serif;
font-size: 0.875rem;
border: 0;
background-color: transparent;
/* display: flex;
align-items: flex-end;*/
font-weight: bold;
line-height: 1.4;
float: left;
}
@media only screen and (min-width:502px)
{.button {
width: calc(192px - 89px);
}
.button.food {
width: calc(214px - 89px);
}
}
.sort {
width: 1.25rem;
height: 1.25rem;
position: relative;
}
.sort svg {
position: absolute;
}
</style>
<meta name="viewport" content="width=device-width,initial-scale=1">
<table class="table">
<thead class="thead">
<tr class="tr">
<th class="th">
<button class="button">
Age
<span class="sort"></span>
</button>
</th>
<th class="th">
<button class="button food">
Favorite Food
<span class="sort"></span>
</button>
</th>
<th class="th" aria-sort="ascending">
<button class="button">
Favorite Color
<span class="sort">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="presentation" style="width: 1.25rem; height: 1.25rem;"> <path d="M11.4709 4.2136C11.7638 3.92071 12.2386 3.92071 12.5315 4.2136L17.1277 8.8098C17.4206 9.10269 17.4206 9.57756 17.1277 9.87046C16.8348 10.1633 16.3599 10.1633 16.0671 9.87046L12.7512 6.55459V19.25C12.7512 19.6642 12.4154 20 12.0012 20C11.587 20 11.2512 19.6642 11.2512 19.25V6.55459L7.93533 9.87046C7.64244 10.1633 7.16756 10.1633 6.87467 9.87046C6.58178 9.57756 6.58178 9.10269 6.87467 8.8098L11.4709 4.2136Z"> </path></svg>
</span>
</button>
</th>
<th class="th">
<button class="button">
Likes Neil Diamond?
<span class="sort"></span>
</button>
</th>
</tr>
</thead>
</table>
希望这个答案对您有所帮助。我没有为移动视图制作CSS！
,
我认为除了视觉上的歧义，这里根本没有问题。这是我的观察。
- 实际项目紧密绑定。默认情况下，除非另有说明，否则任何元素都会跟随另一个元素。
- 为什么要有间距？这些有两种变体
- 首先：如果文本不在任何换行元素之内（当前处于这种状态）。
在这种情况下，由于没有明确提到宽度，因此对于文本和跨度都自动分配宽度，并且文本将尝试使用所有宽度，但span元素采用的1.25rem宽度除外。而且根据w3c文档，存在规则仅用于标识给定字符串上的断点而不是空格，因为文本对齐是完全不同的问题。请参阅this problem来了解它是如何完成的，它是大学中研究的标准动态编程问题。因此，在进行对齐时当然会存在间距，请记住可用的宽度，浏览器不会崩溃。
- 第二：如果文本在包装元素内，则可以是span，p，div等。在这种情况下，由于没有明确指定宽度，因此会自动分配宽度。在这种情况下，您实际上可以在inspect元素中看到该元素试图占据除排序图标的1.25rem宽度之外的所有空间。
确实存在紧密边界，只是动态间距导致了视觉上的歧义。
现在介绍该解决方案，尽管不完美，但我可以提出的最无需JavaScript干预的解决方案是
注意：text-align: center仅用于减少空间不足的影响，除非您严格要求不要这样做。
如果这能解决您的问题，请告诉我。
效果如下：
本文链接：https://www.f2er.com/3025851.html
