1

我的就职帖子在这里，希望大家能有所帮助。:)

我一直在努力创建一个纯 XHTML 严格的网站，没有图像，但我遇到了一个小问题。我似乎找不到一种方法来制作如下所示的按钮：

在此处输入图像描述

它有一个悬停状态，矩形，当前是

<div class="topprodcartadd"><a href="#">Add to Cart</a></div>

我做了一个看起来像这样的小 CSS 类：

.topprodcartadd {
    width: 190px;
    height: 50px;
    background-color: #000;
    margin: 10px 0px;
    padding:0px 10px 10px 0px;
    float: left;
    text-align: right;
    vertical-align: middle;
}
.topprodcartadd:hover {
    background-color: #00a7e6;
}
.topprodcartadd a {
    text-decoration: none;
    color: #00a7e6;
}
.topprodcartadd a:hover {
    color: #fff;
}

我想以某种方式使其链接，但是在 XHTML Strict 中，当我像这样摇动代码时，它会给我验证错误：

<a href="#"><div class="topprodcartadd">Add to Cart</div></a>

那么有人对我可以做些什么来使按钮以这种方式显示有任何其他想法吗？

谢谢！

4

3 回答 3

4

将锚的 CSS 更改为：

.topprodcartadd a {
    text-decoration: none;
    color: #00a7e6;
    display:block;
    width: 190px;
    height: 50px;
}

jsFiddle 示例

我添加display:block了宽度和高度，以便链接占据 div 中的所有空间。

于 2012-12-21T21:48:15.977 回答
1

所以，如果我解决了你的问题：

1）您可以设置display: block它a以填充父元素。

2) 你确定你需要 XHTML Strict 吗？

于 2012-12-21T21:51:52.017 回答
-1

如果您只是需要鼠标光标变成手形，只需添加cursor:pointer到您的 DIV 样式中，您不必使用锚点。

于 2012-12-21T21:51:41.823 回答