CSS文档阅读笔记（高级）2

CSS对齐

水平菜单（使用ul创建）

两种方法都不错，但是希望链接拥a标签有相同的尺寸，就必须使用浮动方法。
1.为了实现水平菜单栏，可以把li设置成行内元素（display：inline），取消它的前后换行。（但这种设置无法保证链接的宽度相同）

设置 li{display:inline}后
得到下图：

2.把li设置成左浮动 li{float:left}

通过设置边框来设置分隔线

ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
li {display:inline}

<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
测试代码
</p>

给a标签设置右框 border-right:1px solid white;
（实现的前提是没有边距 边框的设置才有意义 如果设置了边距 即使设置了白色的右边框也毫无意义 间距太大了）
效果图：

注释：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。