Html 如何在不移动两个图元的情况下减少图元之间的间距

如何在不移动“姓氏”的情况下移动这个“name”元素

我希望“姓名”和“姓氏”在同一行，就像你在Facebook上看到的一样。我还不太了解定位，但我已经在网上搜索过了，我仍然不知道如何将其应用到我的示例中，因为有许多

div

s和彼此内部的内容

我添加了

float:left

添加到我的“name”元素，使其向左移动，但当我尝试添加边距使其更接近“姓氏”时，它的行为不符合我的要求

在

名称位置添加边距也会向右移动“姓氏”元素

这是我的代码：

这就是我想要的效果：
像这样的东西

      <div class="form-content-inline">
        <label for="name" id="name-label">Name</label>
        <input type="text" id="name" name="ime" placeholder="Name" class="form-control" required>
      </div>

      <div class="form-content-inline">
        <label for="surname" id="surname-label">Surname</label>
        <input type="text" id="surname" name="prezime" placeholder="Surname" class="form-control" required>
      </div>

移除浮动并添加
显示：内联块
到divs表示姓名和姓氏。
您需要在这里输入您的标记和CSS，在您的问题中。系统应该已经通知您了，但是没有，因为您包含了一些代码字符串。这是在SO上发布的基本要求。是的，但是为了让人们理解，我必须把整个代码都放进去，但是太长了，不是吗@伊舍伍德对此表示怀疑，但无论如何，这都不会改变规则。你在问两个问题。显示两个元素的标记，以及演示问题和相关CSS所需的最小包含元素数。好的，如果我问更多问题，我会记住这一点@ISHERWOOD这一个做到了-。非常感谢@step！
.form-content, .form-content-inline {
  margin: 0 auto 1.25rem auto;
  padding: 0.25rem;
}
.form-content-inline {
  display: inline-block;
}