如何在多行 div 周围添加 css 填充

发布于 2024-09-16 20:50:25 字数 337 浏览 3 评论 0原文

我有以下 css 来在 div 周围放置填充：

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

它工作得很好，直到内容（恰好位于 html 表格中的单元格内）占据两行。当我在 firefox 中查看此内容时，它看起来像是在尝试添加内容的每一行的填充（即使它全部在一个 div 内），所以我在第二行上方出现一些奇怪的空间重叠，覆盖了第一行的一部分。

是否有解决此问题的解决方法或其他解决方案？ t 在多行上中断。

原文

i have the following css to put padding around a div:

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

it works great until the content (which happens to be inside a cell in an html table takes up two lines. When i look at this in firefox, it looks like its trying to add the padding to each line of the content (even though its all inside one div) so i get some weird overlap of space above the second line that covers part of the first line.

Is there a workaround for this issue or another solution that doesn't break on multiline.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

幽梦紫曦～ 2024-09-23 20:50:25

它添加此填充是因为您已将 .orangeAllday 和 .orangeAll Day a 包含在一起，因此链接和内容都包含在内。元素 .orangeAllday 将获得 5px 的填充。

您需要像这样将它们分开：

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

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

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

It is adding this padding because you have included both the .orangeAllday and .orangeAll Day a together, so both the link & the elemenent .orangeAllday will get padding of 5px.

You would need to separate them like so:

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

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

this is done with the assumption that you want padding on the .orangeAllDay element only, but wish to retain background / color for link a.

回复收藏 0 原文

旧瑾黎汐 2024-09-23 20:50:25

您已在 div (.orangeAllDay) 和链接周围添加了填充。您看到的是链接的填充。有多种方法可以解决此问题，具体取决于 HTML 的具体外观。

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

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

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

You've got the padding around the div (.orangeAllDay) and the link. What you are seeing is the padding of the link. There are several ways around this, depending on how exactly the HTML looks like.

If it only contains the link, I'd suggest to actually drop the div and just have the link display as a block:

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

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

回复收藏 0 原文

~没有更多了~