布局
通常有三种方式
{
1. position
2. float： left --》 其次是这个
3. block： inline-block --》 他们推荐我用这个
}
具体描述
由于好久没有写html了， 早已忘的一干二净， 今天忽然想写html，需要在top写个导航条， 但是又不记得li怎么变成行内块标签了， 只能去请教一下前端的同事了
自己找到的答案是display的方法
他告诉我的是float方法
方法一：
display方法， 需要将li转换成行内标签或者行内块标签
<html> <head> <style type="text/css"> li { display: inline; <-- 或者inline-block --> list-style:none; margin:0 20px; } div { display: none； } </style> </head> <body> <ul> <li>aa</li> <li>bb</li> <li>cc</li> <li>dd</li> </ul> </body> </html>
方法二：
选择左浮动方式， float：left；
<html> <head> <style type="text/css"> li { float: left; list-style:none; margin:0 20px; } div { display: none； } </style> </head> <body> <ul> <li>aa</li> <li>bb</li> <li>cc</li> <li>dd</li> </ul> </body> </html>
自己写的小例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #ac-globalnav { position: absolute; top: 0; right: 0; left: 0; z-index: 9999; display: block; margin: 0; width: 100%; min-width: 1024px; height: 88px; max-height: 100px; background: #333; background: rgba(0,0,0,0.8); font-size: 17px; user-select: none; } li { display: inline; list-style:none; margin:0 35px 0 35px; color: #fff; line-height:58px; cursor:pointer; } li:hover{ color: red; <!--想换加入背景色的话， 可以使用background--> } ul {float:right; margin-right:25%;} </style> </head> <body> <!--top--> <div> <div id="ac-globalnav"> <ul> <li>首页</li> <li>简介</li> <li>自学教程</li> <li>指法表</li> <li>曲谱</li> <li>萧选购维护</li> <li>洞箫音乐</li> <li></li> </ul> </div> </div> <!--body--> <div> </div> <!--button--> <div> </div> </body> </html>