html - css 的冲突问题

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 是完全有效的，不允许在内联元素中嵌套 block 级元素。因此，在您的情况下，插入 <div> 是非法的在 <a> 里面.你可以留下<div>一起出去并设计<a>元素代替并给它 display: block使其表现得像 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;
}