Html 将带圆的矩形放在一行中

我用html和css制作了一个矩形和一个圆形。但我想把它们放在一起。我能做什么

.rect循环{
宽度：30px；
高度：自动；
左边距：100px；
}
.矩形{
宽度：20px；
高度：4px；
背景：rgb（85,80,80）；
边界半径：30px；
左边距：5px；
}
.圆圈{
宽度：5px；
高度：5px；
背景：rgb（85,80,80）；
边界半径：50%；
}

不太清楚您的意思，但是如果您想要一个矩形和一个圆形以相同的垂直对齐，那么您可以这样做：

我假设您的意思是希望相同位置上的元素相互重叠

我添加了

位置：相对

到包装器（

.rect circ

），以便我可以定位与此包装器相关的元素

我添加了

位置：abosulute；左：0编码到圆形和矩形，以将它们放置在包装器的左侧


.rect循环{
宽度：600px；
高度：自动；
左边距：100px；
位置：相对位置；
}
.矩形{
宽度：400px；
高度：80px；
背景：rgb（85,80,80）；
边界半径：30px；
左边距：5px；
位置：绝对位置；
左：0；
}
.圆圈{
宽度：100px；
高度：100px；
边界半径：50%；
位置：绝对位置；
左：0；
背景：蓝色；
}

只需使用此css即可

.rect-circ{ 
    width: 30px;
    height: auto; 
    margin-left: 100px;
    display:flex;
    flex-direction: row;   
 }

一行CSS。你这是什么意思？如果你想要一行CSS，试试缩小（：