如何使用CSS设置链接列表的样式？

Question

关于我如何使用CSS在小方框中设置这些链接以使用css看起来很热的任何提示？(这是我的HTML代码)

我会喜欢干净简洁的布局

    <div id="related_links">
   <ul>
    <li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database.aspx">SQL Services</a></li>
    <li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database/MSSQLServerPerformanceTuning.aspx">Performance Tuning</a></li>
    <li><a alt="SQL Server Audit Service" title="SQL Server Audit Service" href="/Database/SQLServerAuditService.aspx">SQL Auditing</a></li>
    <li><a alt="Upgrade to Microsoft SQL 2008" title="Upgrade to Microsoft SQL 2008" href="/Database/SQLServer2008.aspx">SQL 2008</a></li>
   </ul>
</div>

Answer 1

我认为A List Apart已经涵盖了很多年前:http: //www.alistapart.com/articles/taminglists/

垂直

(信用:A List Apart)

#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;
        }

<div id="related_links">
  <ul>
    <li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database.aspx">SQL Services</a></li>
    <li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database/MSSQLServerPerformanceTuning.aspx">Performance Tuning</a></li>
    <li><a alt="SQL Server Audit Service" title="SQL Server Audit Service" href="/Database/SQLServerAuditService.aspx">SQL Auditing</a></li>
    <li><a alt="Upgrade to Microsoft SQL 2008" title="Upgrade to Microsoft SQL 2008" href="/Database/SQLServer2008.aspx">SQL 2008</a></li>
  </ul>
</div>

横

这是几乎相同的例子,我通过一些格式更改进行了修改.

#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;
        }

### If you don't want the background spanning the whole screen

    #related_links, #related_links ul{
       display            : inline;
       }

<div id="related_links">
  <ul>
    <li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database.aspx">SQL Services</a></li>
    <li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database/MSSQLServerPerformanceTuning.aspx">Performance Tuning</a></li>
    <li><a alt="SQL Server Audit Service" title="SQL Server Audit Service" href="/Database/SQLServerAuditService.aspx">SQL Auditing</a></li>
    <li><a alt="Upgrade to Microsoft SQL 2008" title="Upgrade to Microsoft SQL 2008" href="/Database/SQLServer2008.aspx">SQL 2008</a></li>
  </ul>
</div>

如何删除空格

要删除项目之间的空格,您必须浮动列表项目,或者删除一个项目的结尾与另一个项目的开头之间的空格:来自:

<ul>
  <li>1</li>   
  <li>2</li>   
  <li>3</li>
<ul>

至:

  <ul>
          <li>1</li
         ><li>2</li><!--   
       --><li>3</li>
    <ul>

注意:后面的方法1不会结束列表标记,直到下一行,不允许两个列表项之间的空格.方法2类似,但它使用注释来忽略第二个和第三个列表项之间的任何空格.

再次,你可以随时浮动liCSS