html中如何使用li进行水平排列(html,水平排列,web开发)

时间:2024-04-30 02:25:39 作者 : 石家庄SEO 分类 : web开发
  • TAG :
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <title>li水平排列</title> <style> html{ font-size: 20px; } @media only screen and (min-width: 320px){ html{font-size: 20px !important;} } @media only screen and (min-width: 350px){ html{font-size: 22.5px !important;} } @media only screen and (min-width: 365px){ html{font-size: 23px !important;} } @media only screen and (min-width: 375px){ html{font-size: 23.5px !important;} } @media only screen and (min-width: 390px){ html{font-size: 24.5px !important;} } @media only screen and (min-width: 400px){ html{font-size: 25px !important;} } @media only screen and (min-width: 428px){ html{font-size: 26.8px !important;} } @media only screen and (min-width: 432px){ html{font-size: 27.4px !important;} } @media only screen and (min-width: 481px){ html{font-size: 30px !important;} } @media only screen and (min-width: 569px){ html{font-size: 35px !important;} } @media only screen and (min-width: 569px){ html{font-size: 40px !important;} } body{ margin: 0; padding: 0; } ul{ width: 100%; margin: 0.3rem 0; padding:0.3rem 0; border-top:0.05rem solid #ccc; border-bottom: 0.05rem solid #ccc; } li{ width: 33%; list-style-type: none; display:inline-block; font-size: 0.8rem; border-left: 0.05rem solid #ccc; text-align: center; } </style></head><body> <ul> <li>我是第一个li</li> <li>我是第二个li</li> <li>我是第三个li</li> </ul> </body></html>

html中如何使用li进行水平排列

html中如何使用li进行水平排列
html中如何使用li进行水平排列

html中如何使用li进行水平排列

html中如何使用li进行水平排列

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:html中如何使用li进行水平排列的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:element-ui怎么操作table滚动效果下一篇:

4 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18