Html CSS-类堆栈的多个相互重叠的使用

我有这个CSS样式，我用标签

#profile form label {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 21px;
   text-align: center;
   color: #FFF;
   text-shadow: 0px 2px 1px #333;
   top: 318px;
   text-align: center;
   width: 273px;
   opacity: 0.9;
   left: 140px;
   display: block;
   position: absolute;
}

---

我有一个名为

profile

的主div，我有一个使用标签的表单，但是当我尝试放置多个标签时，它们堆叠在一起。如何将它们隔开？

尝试将位置更改为相对位置

您正在使用

位置：绝对

和

顶部：318px

，

左侧：140px

定位所有标签。假设它们都是

的直接子对象，这会将它们放在完全相同的位置

---

您应该尝试不同的方法来定位标签，可能是

位置：相对的
，或者尝试更行-列样式的方法。
您可能希望尝试边距和/或填充来隔开标签。如果您想让它们并排浮动：也可以向左移动？
如何将它们隔开？从左到右？您的位置是绝对的，这就是它们堆叠的原因。我尝试将位置更改为相对，但无法正确定位标签。我希望它们具有这个类的属性，我不想每次都定义一个新类。有没有办法做到这一点？我建议不要使用
position:relative
。尝试使用
的子容器获得所需的布局。但是，当我不知道所需的布局时，很难给出建议。我希望它们水平隔开，当我使用“相对”时，它们彼此垂直地在下面。您可以在容器上使用属性
display:inline block
，这样它们就不会强制同一父对象中的其他元素位于新行上。然后你可以用
margin
之类的属性将它们隔开。我让它工作了。谢谢你，他们只是互相叠在一起。我想把它们隔得更宽些