布局
通常有三种方式
{
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>
