我正在尝试使用 HTML5 和 CSS 创建表格。对于一列单元格，我想将一半文本向左对齐，一半文本向右对齐。
我得到的最接近的是使用 <p>标签，但文本被分隔成 2 行，是否可以通过对齐拆分单个文本？
span.alignleft {
text-align: left;
}
span.alignright {
text-align: right;
}
p.alignleft {
text-align: left;
}
p.alignright {
text-align: right;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}<!DOCTYPE html>
<html lang='en'>
<head>
<title>Test Page</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td><a href="#"><span class="alignleft">Some Text Align Left</span><span class="alignright">Some Text Align Right</span></a></td>
</tr>
<tr>
<td>B</td>
<td><a href="#"><span class="alignleft">A</span><span class="alignright">B</span></a></td>
</tr>
<tr>
<td>C</td>
<td>
<a href="#">
<p class="alignleft">A</p>
<p class="alignright">C</p>
</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>最佳答案
span.alignleft {
text-align: left;
}
span.alignright {
text-align: right;
}
.alignleft {
text-align: left;
}
.alignright {
text-align: right;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}<!DOCTYPE html>
<html lang='en'>
<head>
<title>Test Page</title>
</head>
<body>
<title>Test Page</title>
<table>
<thead>
<tr>
<th>Name</th>
<th colspan="2">Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td colspan="2">
<a href="#">
<span class="alignleft">Some Text Align Left</span>
<span class="alignright">Some Text Align Right</span>
</a>
</td>
</tr>
<tr>
<td>B</td>
<td colspan="2">
<a href="#">
<span class="alignleft">A</span>
<span class="alignright">B</span>
</a>
</td>
</tr>
<tr>
<td>C</td>
<td class="alignleft"><a href="#">A </a></td>
<td class="alignright"><a href="#">C </a></td>
</tr>
</tbody>
</table>
</body>
</html>使用 rowspan 和 colspan 你应该可以解决你的问题。
关于html - 如何对齐元素内的一半文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56286809/