html中如何使用li进行水平排列
导读:本文共1514字符,通常情况下阅读需要5分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maxim... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。<!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>
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:
html中如何使用li进行水平排列的详细内容,希望对您有所帮助,信息来源于网络。