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

&LemonTree

于 2024-04-28 14:33:56 发布

阅读量458

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Error 文章标签：前端 html css

本文链接：https://blog.youkuaiyun.com/LemonTree_LYR/article/details/138277634

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;            /* 根据需要设置高度 */
}