我正在使用TailwindCSS排版插件重新设计我的个人博客。索引页列出了我以yyyy-mm-dd - title格式写的所有帖子。我的问题是- title没有在同一列中对齐，并根据日期向左或向右移动。
<html>
<head>
<title>Testing Tailwind CSS text alignment</title>
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
</head>
<body>
<div id="post-body" class="mx-auto prose prose-stone prose-ul:list-none px-2 lg:px-0">
<h1>Programming</h1>
<ul>
<li><span>2020-08-22</span><span> - </span><a href="230A6048.html">Blog Post Title 1</a></li>
<li><span>2018-12-15</span><span> - </span><a href="F6A029B0.html">Blog Post Title 2</a></li>
<li><span>2012-02-23</span><span> - </span><a href="76191EE8.html">Blog Post Title 3</a></li>
<li><span>2011-08-07</span><span> - </span><a href="1DE16EA3.html">Blog Post Title 4</a></li>
</ul>
</div>
</body>
</html>在这里,您将看到-第二项(日期:2018-12-15)是不一致的。如何解决这个问题?我试过很多不同的方法，但都失败了，所以我在这里问一下，希望有人能帮助我。
这与顺风或插件没有多大关系。这是由于大多数使用的字体都是成比例的。因此,"我"比"w"需要更少的空间。有几个选项可以对齐文本。
您可以使用monospaced字体(就像在代码块中一样)，但通常这些不是很好。为了说明这一点，我在代码片段中使用了pre标记，在顺风中，您可以使用font-mono类。
一个更好的解决方案是使用一个表，这样您将有真正对齐的列。因此，即使字符数不同，文本仍然对齐。请注意，顺风式排版也会影响表格的样式，这通常是一件好事，但在这种情况下可能不是。
<html>
<head>
<title>Testing Tailwind CSS text alignment</title>
</head>
<body>
<div id="post-body" class="mx-auto prose prose-stone prose-ul:list-none px-2 lg:px-0">
<h1>Table</h1>
<table>
<tr><td>2011-01-11</td><td> - </td><td><a href="230A6048.html">Blog Post Title 1</a></td></tr>
<tr><td>20-8-12</td><td> - </td><td><a href="230A6048.html">Blog Post Title 2</a></td></tr>
<tr><td>2014-3-18</td><td> - </td><td><a href="230A6048.html">Blog Post Title 3</a></td></tr>
<tr><td>2020-08-22</td><td> - </td><td><a href="230A6048.html">Blog Post Title 4</a></td></tr>
</table>
</div>
<pre>
<div><h1>Monospaced</h1><ul>
<li><span>2011-01-07</span><span> - </span><a href="1DE16EA3.html">Blog Post Title 4</a></li>
<li><span>2018-08-07</span><span> - </span><a href="1DE16EA3.html">Blog Post Title 4</a></li>
<li><span>2013-04-07</span><span> - </span><a href="1DE16EA3.html">Blog Post Title 4</a></li>
<li><span>2022-06-07</span><span> - </span><a href="1DE16EA3.html">Blog Post Title 4</a></li>
</ul></pre>
</body>
</html>希望对你有帮助。