今天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 中可能的值。