Question

我已将我的问题转换为简单的代码。我希望跨度类块与class一起完全包装div类。它从div的右下角斜向外面走。有人可以帮忙吗？想法是，在我试图解决的更大问题中，希望能够有时以div和有时以span来创建边界。有人可以帮忙如何使这些div彼此重叠吗？

.checker {
  width: 17px;
  height: 17px;
  border: 10px solid green;
  display: inline-block;
}

.in {
  width: 17px;
  height: 17px;
  border: 10px solid red;
  display: inline-block;
}

<div class="checker" id="uniform-deleteradio_0"><span class="in"></span></div>

于14/3更新。感谢所有的答案。有些技术会使内部范围进入外部div。但是，我想要的就像div和span一样被一个包裹在另一个之上。说，我给div或span设置了边框，它应该看起来像单个边框，并且div和span都看起来像单个元素。这就是我实际项目中的情况，我无法消除div或span之一。 span具有一张图像作为背景（复选框），而div带有边框。

Answer 1

我认为问题是您的内部跨度由于边框而超出了周围的div框的大小。您可以将外部div增大（+ 20px）以适合内部框。

Answer 2

从外部div移除height和width，因此允许其足够大以适合内部尺寸的div。我还将内部div的display属性更改为block。

    <!DOCTYPE html>
    <html lang="en">
    <style>
    .checker { border: 10px solid green; display: inline-block; }
    .in { width: 17px; height: 17px; border: 10px solid red; display: block; }
    </style>
    <div class="checker" id="uniform-deleteradio_0"><span class="in"></span></div>
    </html>

Answer 3

您应该将.checker的高度和宽度设置为'auto'。固定的宽度和高度当然会把任何孩子放到div之外

Answer 4

这终于对我有用。左边距：-10px 右边距：-10px

跨度超出div，且不完全适合

4 个答案: