Question

我昨晚被告知CSS中不允许以下内容。

<a href="index.php"><div class="button">Home</div></a>

.submenu div.button{width:72px; height:20px; float:left; margin:0 20px; font-size:0.9em; font-family:Arial; padding:2px; color:black;}

如何为按钮创建我想要的外观，然后允许用户以任何其他方式单击它？这样做的最佳方式是什么？

它按原样工作，但我被告知它不适合。

Answer 1

CSS完全有效，不允许将块级元素嵌套在内联元素中。因此，在您的情况下，在<div>内插入<a>是非法的。您可以完全退出<div>并改为设置<a>元素的样式，并为其display: block提供行为，就像块级元素一样。

<a href="index.php" class="button">Home</a>

.submenu a.button{
    display: block;
    width: 72px;
    height: 20px;
    float: left;
    margin: 0 20px;
    font-size: 0.9em;
    font-family: Arial;
    padding: 2px;
    color: black;
}

Answer 2

这样的事情可能会以最小的麻烦达到你想要的目的。

<div class="submenu">
    <a class="button" href="index.php">Home</a>
</div>

.submenu a.button{
    width:72px; 
    height:20px; 
    float:left; 
    margin:0 20px; 
    font-size:0.9em; 
    font-family:Arial; 
    padding:2px; 
    color:black;

    display:block; /*added */
}

锚点将被高估，只需.submenu a {}就足够了，但这取决于你是否希望在.submenu div中有其他未加样式的链接。

编辑 - 无法从您提供的标记中真正说出来，但您可能希望使用无序列表进行“语义”标记。我只是一个例子

Answer 3

您可以使用span而不是div ... 或者您可以使用display：block作为标签并为a标签设置样式...

与css冲突的问题

3 个答案: