如何实现CSS列表li标签水平居中显示？
- 内容介绍
- 文章标签
- 相关推荐
本文共计569个文字，预计阅读时间需要3分钟。
今天PHP老师让我们做一个个人博客主页，因为主页需要有小，所以遇到了li标签横向居中的问题。因为是CSS初学者，就在网上搜索了解决方法，最后找到了两种解决方案。第一种是...
今天PHP老师让我们做一个个人的博客主页，因为主页肯定要有小标题，然后就遇到了li标签横向居中问题，因为我是初学CSS，就在网上寻求解决办法，最后找到两种我汇总一下。
第一种
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #title1 { text-align:center; } ul li { list-style-type:none; display:inline; } </style> </head> <body> <div id="title1"> <ul> <li>标题一</li> <li>标题二</li> <li>标题三</li> <li>标题四</li> </ul> </div> </body> </html>
效果如图
第二种
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul { display: flex; /*flex-direction: row;*/ /*flex-wrap: nowrap;*/ flex-flow: row nowrap; justify-content: center; } ul li { list-style: none; border: 2px solid #161EE8FF; text-align: center; line-height: 30px; padding: 10px; height: 30px; width: 100px; margin: 0 10px; } </style> </head> <body> <div> <ul> <li>标题一</li> <li>标题二</li> <li>标题三</li> <li>标题四</li> </ul> </div> </body> </html>
效果如图：
如果想去掉边框，把border删去即可。
list-style-type 设置列表项标记的类型。参阅：list-style-type中可能的值。 list-style-position 设置在何处放置列表项标记。参阅：list-style-position中可能的值。 list-style-image 使用图像来替换列表项的标记。参阅：list-style-image中可能的值。 initial 将这个属性设置为默认值。参阅：initial中可能的值。 inherit 规定应该从父元素继承 list-style 属性的值。参阅：inherit中可能的值。本文共计569个文字，预计阅读时间需要3分钟。
今天PHP老师让我们做一个个人博客主页，因为主页需要有小，所以遇到了li标签横向居中的问题。因为是CSS初学者，就在网上搜索了解决方法，最后找到了两种解决方案。第一种是...
今天PHP老师让我们做一个个人的博客主页，因为主页肯定要有小标题，然后就遇到了li标签横向居中问题，因为我是初学CSS，就在网上寻求解决办法，最后找到两种我汇总一下。
第一种
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #title1 { text-align:center; } ul li { list-style-type:none; display:inline; } </style> </head> <body> <div id="title1"> <ul> <li>标题一</li> <li>标题二</li> <li>标题三</li> <li>标题四</li> </ul> </div> </body> </html>
效果如图
第二种
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul { display: flex; /*flex-direction: row;*/ /*flex-wrap: nowrap;*/ flex-flow: row nowrap; justify-content: center; } ul li { list-style: none; border: 2px solid #161EE8FF; text-align: center; line-height: 30px; padding: 10px; height: 30px; width: 100px; margin: 0 10px; } </style> </head> <body> <div> <ul> <li>标题一</li> <li>标题二</li> <li>标题三</li> <li>标题四</li> </ul> </div> </body> </html>
效果如图：
如果想去掉边框，把border删去即可。
list-style-type 设置列表项标记的类型。参阅：list-style-type中可能的值。 list-style-position 设置在何处放置列表项标记。参阅：list-style-position中可能的值。 list-style-image 使用图像来替换列表项的标记。参阅：list-style-image中可能的值。 initial 将这个属性设置为默认值。参阅：initial中可能的值。 inherit 规定应该从父元素继承 list-style 属性的值。参阅：inherit中可能的值。