HTML 超链接按钮

Question

您好，我正在尝试使用 XHTML 和 CSS 创建一个用户友好的超链接按钮。我有一个列表项超链接的无序列表，我想为这些超链接添加圆 Angular 边框，并能够单击按钮中的任意位置以使用超链接功能。

目前我的 XHTML 文件中有:

<div>
<ul>
<lh>Web Links</lh>
<li><a href="http://www.google.com/">Google</a></li>
</ul>
</div>

在我的 CSS 中:

 div ul li { border:2px solid blue;
          width: 175px;
          height: 40px;
          text-align:center;
          margin: 25px;
          border-radius:10px;
          -webkit-border-radius:10x;
          -moz-border-radius:10px; }

当我将“a:link”添加到 div ul li (div ul li a:link) 时，它会在链接周围放置边框，忽略宽度和高度 px 填充。我也尝试过使用:

a:link  { display: block; 
          width: 8em;
          height: 1.5em;
          background-color:#999999; 
          border-top: 1px solid blue; 
          border-right: 1px solid blue; 
          border-bottom: 1px solid blue; 
          border-left: 1px solid blue; 
          text-decoration: none; 
          color: #000000; 
          cursor: default;
          margin: 25px;
          block-radius:10px;
          -webkit-block-radius:10x;
          -moz-block-radius:10px;}

通过使用它，我获得了外观不错的按钮，但不是我想要的按钮，也没有圆 Angular 。

在此先感谢您的帮助。

Answer 1

你可以添加这个规则，它会扩展链接元素来填充按钮，

a {
    display: block;
    text-decoration: none;
    height: 100%;
    width: 100%;    
}

演示在 http://jsfiddle.net/7pMHf/