HTML，将 div 彼此靠近答案

【问题标题】：HTML, Place divs near each otherHTML，将 div 彼此靠近
【发布时间】：2017-06-29 07:39:53
【问题描述】：

我的 html 代码有问题。我有 "Title" 、 "Firstname" 和 "Surname" ，我需要一个输入框来让用户填写它们。这些输入框在我的表单生成器中定义为字段（例如 [en_title]）现在，当我写下 html 代码以显示输出时，块被放置在彼此下方。我想将它们彼此靠近放置，当我在 div 样式中使用 float 时，它们彼此靠近放置，但输入框会缩小，而在第一种情况下，输入框不会缩小。请给我一个解决这个问题的解决方案，即块彼此靠近并且盒子不会缩小。谢谢

<div>
  Title <br />
  [en_title]
</div>
<div>
  Firstname <br />
  [en_fname]
</div>
<div>
  Surname <br />
  [en_sname]
</div>

【问题讨论】：

如果只有 3 个元素，请使用 float: left; width: 33.333%。如果涉及任何填充或边框，请添加box-sizing: border-box
固定宽度可能是您所需要的。如果你展示你现有的 CSS 会更好。

标签： html css block

【解决方案1】：

使用display:inline-block; 而不是float

div{
display:inline-block;
}

<div>
Title <br />
<input type="text"/>
</div>
<div>
Firstname <br />
<input type="text"/>
</div>
<div>
Surname <br />
<input type="text"/>
</div>

【讨论】：

【解决方案2】：

因此，您有 3 个 div 需要水平放置。包含所有这些 div 的 div 的宽度是 100%。所以每个 div 都有 100/3 % 的宽度。例如，它可以用作 Bootstrap。

你可以这样做

运行 sn-p

.your-block {
    float: left;
    width: 33.33333%;
}

<div class="your-block">
    <label for="title">Title </label> <br />
    <input id="title" type="text"/>
</div>
<div class="your-block">
    <label for="firstname">firstname </label> <br />
    <input id="firstname" type="text"/>
</div>
<div class="your-block">
    <label for="surname">surname </label> <br />
    <input id="surname" type="text"/>
</div>

【讨论】：

但是@shp 如果您更改 div 的填充，则必须减小宽度。尝试使用诸如引导程序之类的工具，它可以轻松帮助您

【解决方案3】：

您将需要使用宽度并使用position:absolute，以便您可以使用margin-left:10px 或margin-top:10px 将您的控件移动到任何位置，无论您的情况如何。如果您共享相同的 css 代码也会很有帮助。

【讨论】：

【解决方案4】：

更好的解决方案：不要为此使用 divitis，使用标签和输入字段：

HTML：

<form>
  <label> Name <input type="text"> </label>
  <label> Email <input type="email"> </label>
</form>

CSS：

form{display: flex}

这样您就拥有了语义化的 HTML 并实现了您想要的外观。关于 flexbox 可以做什么的一个很好的概述是 css-tricks：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：