Html 保持div和x27之间的间距；s

我想显示一个html div，其中包含一个带圆圈（绿色或红色）的状态描述。该圆圈在描述的右角显示了电子地图的状态

我的问题如下。如果窗口大小已更改（smaler），说明和“状态圈”将相互重叠

我怎样才能防止这种情况？ 你知道css代码应该是怎样的吗

结构主要是：

.statusdiv{
高度：40px；
}
.Beschreibung先生{
位置：绝对位置；
左缘：40%；
}
克莱斯先生{
位置：绝对位置；
宽度：25px；
高度：25px；
顶部：13px；
/*左：190px*/
左缘：60%；
边框：1px纯黑；
文本对齐：居中；
边界半径：12.5px；
}
.关于{
背景颜色：绿色；
}
.关闭状态{
背景色：红色；
}

电机状态

如果我理解正确，您可以使用“motortatus”类设置圆圈的样式

---

尝试以百分比而不是像素设置宽度和高度。这将调整状态圈的大小，并防止其与描述重叠，除了说明的字体根本不调整大小并填充整个分区之外。

这是基于代码的原始屏幕截图：基本上，您应该使用

显示：内联块

而不是

位置：绝对

，以防止项目符号与文本重叠，然后在项目符号上留一个边距，这样它和文本之间总是有足够的空间

。列表块ul{
填充：0；
保证金：0；
}
1.列表块李{
列表样式：无；
}
.statusdiv{
空白：nowrap；
}
.Beschreibung先生{
左缘：40%；
显示：内联块；
垂直对齐：中间对齐；
}
克莱斯先生{
宽度：25px；
高度：25px；
左边距：10px；
边框：1px纯黑；
文本对齐：居中；
边界半径：12.5px；
显示：内联块；
垂直对齐：中间对齐；
}
.关于{
背景颜色：绿色；
}
.关闭状态{
背景色：红色；
}

电机状态



电机状态

我喜欢这种类型的内联列表，但您也可以在首选css框架中创建列

我对其进行了样式设计，使两个列表项中的每一项都是ul容器宽度的50%，但您可以根据需要进行调整

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.statusdiv{
列表样式：无；
浮动：左；
保证金：0；
填充：1em；
宽度：100%；
颜色：#2d2d；
}
李国章议员{
宽度：50%；
浮动：左；
填充：0.1em；
}
.statusdiv li：第一个孩子{
文本对齐：右对齐；
高度：35px；
线高：35px；
}
.statusdiv li：最后一个孩子{
文本对齐：左对齐；
}
.圆圈{
内容：“；
背景色：浅绿色；
宽度：35px；
高度：35px；
显示：内联块；
-webkit边界半径：100%；
-moz边界半径：100%；
边界半径：100%；
}

地位问题：

您尝试过CSS吗？你能分享代码吗？请发布代码而不是图片，并告诉我们你到目前为止尝试了什么。代码已上载。我是新来的。不知道如何在帖子中编写代码。尝试给两个内部div指定一个固定或绝对位置，尝试给它们留出空白，并尝试将它们放入网格。我在你的答案中添加了一个片段，请编辑它以重现你的问题。不用担心，否决票不是我的，但随着问题的形成，你可以编辑你的答案，为Stack Overflow的知识库提供一个有价值的版本，我相信不管是谁给出了这个答案，都会恢复操作。“尝试以百分比而不是像素设置宽度和高度。”-这是一个有效的答案