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类似，它使用注释来忽略第二个和第三个列表项之间的任何空格。

同样，您可以随时将li浮动到CSS

中

Answer 2

他们的关键是设计A标签的样式并对列表进行“去样式”。

#related_links ul, #related_links li {
   list-style-type:none;
   margin:0;
   padding:0
}

/* this is for a horizontal menu if you want one */
#related_links li {
   float:left;
}

#related_links a {
   display:block;
   background-color:#202020;
   color:#ffffff;
   padding:5px;
   margin-right:2px;
   margin-bottom:2px;
}

Answer 3

你可以通过很多方式解决这个问题。

要从网站上的任何其他链接中分离您的相关链接，请执行以下操作：

#related_links a {

}

请记住添加悬停和链接样式：

  #related_links a:hover {

   }

  #related_links a:link {

    }

Answer 4

一个不同的简单答案


#related_links span
{
  display: block
}

然后将链接（锚标记）包裹在跨度中。例如：


<div id="related_links">
<span><a ... stuff .. >some text</a></span>
<span><a ... different stuff .. >different text text</a></span>
</div>

Answer 5

将所有这些链接放入一个类

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

和css样式表将有

<style type="text/css">
ul.stylelinks {
color: #666666; /*do your desired styling*/
}
</style>

可以使用以下方式添加更多效果：

ul.stylelinks a:hover {

}
ul.stylelinks a:active {

}
ul.stylelinks a:link {

}
ul.stylelinks a:visited {

}

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

5 个答案:

垂直

水平

如何删除空格