你如何在多行div周围填充css

Question

我有以下css来填充div：

.orangeAllDay, .orangeAllDay a {
    background: #fab384 !important;
    color: white;
    padding: 5px;
}

它很有效，直到内容（恰好在html表格中的一个单元格中占用两行。当我在firefox中查看它时，看起来它试图将填充添加到内容的每一行（即使它全部在一个div内部，所以我得到一些奇怪的空间重叠，第二行覆盖了第一行的一部分。

是否存在此问题的解决方法或其他不会在多行中断的解决方案。

Answer 1

正在添加此填充，因为您已同时包含.orangeAllday和.orangeAll Day a，因此链接和＆amp; elemenent .orangeAllday将填充5px。

您需要将它们分开：

.orangeAllDay {
    background: #fab384 !important;
    color: white;
    padding: 5px;
}

.orangeAllDay a {
    background: #fab384 !important;
    color: white;
}

这是假设您只想在.orangeAllDay元素上填充，但希望保留链接a的背景/颜色。

Answer 2

你在div（.orangeAllDay）和链接周围有填充。你看到的是链接的填充。有几种方法可以解决这个问题，具体取决于HTML的完整程度。

如果它只包含链接，我建议实际删除div并将链接显示为块：

<a href="..." class="orangeAllDay">...</a>

a.orangeAllDay {
    background: #fab384 !important;
    color: white;
    padding: 5px;
    display: block;
}