Question

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

我目前在我的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;}

通过使用这个我实现了看起来不错的按钮，但不是我想要的按钮，也不是它的角落。

提前感谢您的帮助。

Answer 1

您可以添加此规则，它会展开链接元素以填充按钮

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

http://jsfiddle.net/7pMHf/

演示

HTML超链接按钮

1 个答案: