懂点css进一下，li做的导航条的分割竖线怎么变得短一些？？

html-css014

懂点css进一下，li做的导航条的分割竖线怎么变得短一些？？,第1张

li里面要包含a标签，然后把a标签变成块，再给a标签一个右边框，就是你说的分割竖线，这样来控制a标签的高，就可以控制到分割竖线的高了。

具体代码：

<style>

li{float:leftwidth:100pxheight:30px}

li a{display:blockwidth:100pxheight:30pxborder-right:1px solid #000}

</style>

<ul>

<li><a>导航一</a></li><li><a>导航二</a></li><li><a>导航三</a></li>

</ul>

介绍两种方法

1.带竖线的字，在每个导航标记后面加入 '|'这个就是竖线

2.直接用边框

单个导航的样式加上:border-right:1px solid #ddd

你要的各种分割线都在这

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<meta http-equiv="content-type" content="text/htmlcharset=utf-8" />

<title>css各种分割线</title>

<style>

body

{

text-align:center

}

.split-line1

{

border-top:solid 1px #999

width:100%

padding:20px 0px

margin-top:20px

}

.split-line2

{

border-top:dashed 1px #999

width:100%

padding:20px 0px

margin-top:20px

}

.split-line3

{

border-top:dotted 1px #999

width:100%

padding:20px 0px

margin-top:20px

}

.split-line4

{

border-top:double 6px #999

width:100%

padding:20px 0px

margin-top:20px

}

</style>

</head>

<body>

第一部分内容

<div class="split-line1">

实线分割线

</div>

<div class="split-line2">

虚线分割线

</div>

<div class="split-line3">

点状分割线

</div>

<div class="split-line4">

双线分割线

</div>

</body>

</html>