li标签中的a标签内容不居中

原创于 2024-04-28 14:33:56 发布 · 458 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #css

Error 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在li标签中，即使没有设置float属性，通过将a标签设置为内联块并调整文本对齐，使其始终位于li标签左侧。关键在于使用`display:inline-block`和适当的文本对齐属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

li和a中都没有设置float：left;属性，但li标签中的a标签始终紧靠li标签左侧。
解决：使用内联块和文本对齐

li {
  text-align: center;       /* 文本居中 */
}

a {
  display: inline-block;    /* 设置为内联块，以便应用宽度和高度 */
  text-align: center;       /* 确保链接文本居中 */
  /* 可选：如果你想要链接占据整个li的宽度，可以设置宽度和高度 */
  width: 100%;             /* 占据整个li的宽度 */
  height: 30px;            /* 根据需要设置高度 */
}