Html 推特引导：按第一个字母围绕中心放置列表元素（几乎居中）

下面是一个可以在中看到的代码

李{
边框：1px纯红；
文本对齐：居中；
}

a
bb
ccccc

它在大屏幕的单元格中心水平显示文本，对于小型设备，在一列中显示文本

要查看中的更改，请移动垂直条，以便更改宽度

问题是：

如何更改代码以使文本对齐：

对于较大的设备也是如此

但对于小型设备，它是由第一个字母对齐的，但位于中心或围绕中心，即从第一个字母到左边框的目的地对于所有三行文本都是相同的，并且文本不会通过更改屏幕宽度从中心向左或向右移动

---

如果可能（仍然不确定），请不要使用javascript。

您可以使用

文本缩进，使用媒体查询将其应用于小屏幕

/* only for small screens */
li {
    text-align: left;
    text-indent: 2em; /* or any value you prefer */ 
}

出于好奇，这应该是某种“增强”的用户体验还是什么？
/* only for small screens */
li {
    text-align: left;
    text-indent: 2em; /* or any value you prefer */ 
}