css 链接设计,如何使用CSS设计链接列表的样式？

垂直

(信用：除了列表)

#related_links {

width: 12em;

border-right: 1px solid #000;

padding: 0 0 1em 0;

margin-bottom: 1em;

font-family: 'Trebuchet MS', 'Lucida Grande',

Verdana, Lucida, Geneva, Helvetica,

Arial, sans-serif;

background-color: #90bade;

color: #333;

}

#related_links ul {

list-style: none;

margin: 0;

padding: 0;

border: none;

}

#related_links li {

border-bottom: 1px solid #90bade;

margin: 0;

}

#related_links li a {

display: block;

padding: 5px 5px 5px 0.5em;

border-left: 10px solid #1958b7;

border-right: 10px solid #508fc4;

background-color: #2175bc;

color: #fff;

text-decoration: none;

width: 100%;

}

html>body #related_links li a {

width: auto;

}

#related_links li a:hover {

border-left: 10px solid #1c64d1;

border-right: 10px solid #5ba3e0;

background-color: #2586d7;

color: #fff;

}

水平

这里几乎是，我已经感动了一些格式相同的例子变化。

#related_links {

background-color : #90bade;

color : #333;

font-family : Tahoma;

font-size : .7em;

padding : 1em;

}

#related_links li {

border-bottom : 1px solid #90bade;

list-style-type : none;

display : inline-block;

}

#related_links li a {

background-color : #2175bc;

color : #fff;

border-left : 10px solid #1958b7;

border-right : 10px solid #508fc4;

font-weight : bold;

padding : .5em;

text-decoration : none;

}

#related_links li a:hover {

background-color : #2586d7;

color : #fff;

border-left : 10px solid #1c64d1;

border-right : 10px solid #5ba3e0;

}

如果你不想背景横跨整个屏幕

#related_links, #related_links ul{

display : inline;

}

如何删除空格

要在项目之间删除空格呢，你就必须要么浮动列表项目或删除一个结尾和另一个结尾之间的空格： From：

• 1
• 2
• 3

要：

• 1

>

23

注：1后，该方法不会结束列表标签，直到下一行，不允许两个列表项之间的空白。方法2是类似的，但它使用注释来忽略第二个和第三个列表项之间的任何空格。

同样，你可能永远都只是浮在li在CSS