html - 如何在不移动两个元素的情况下减少元素之间的间隙

标签 html css

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

https://prnt.sc/px23sk

我希望“姓名”和“姓氏”位于同一行,就像您在 Facebook 上一样。我还不是很了解定位,但我已经在网上搜索过,但我仍然不知道如何将它应用到我的示例中,因为有许多 div 和彼此内部的内容。

我将 float: left; 添加到我的“name”元素中,因此它向左移动,但是当我尝试添加边距以使其更接近“surname”时,它的行为与我不一样想。

name-position 类上添加边距也会向右移动“surname”元素。

这是我的代码:https://codepen.io/simic21/pen/zYYmbqz
这就是我想要的效果:https://prnt.sc/px26ic

最佳答案

移除 float 并将 display: inline-block; 添加到 name 和 surname 的 div。

关于html - 如何在不移动两个元素的情况下减少元素之间的间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58864689/

相关文章:

html - 在 <div> 元素内居中

html - 如何在移动设备的正确位置保留第二个导航栏?

javascript - 如何使用 html 视频固定输入类型范围

javascript - 在 JavaScript 中使用 RegEx 解析 CSS 字符串

css - 在文本框下方显示跨度

javascript - 提交html后计算表单的文本框值

css - SVG 字体是否仍可在 Google Chrome 中使用?

html - 根相对 URL 在 CSS 中不起作用

html - 如何在 ionic 4 中将 ionic 按钮居中?

java - 从 html 页面和 javascript 调用 java webservice