Question

我的html代码有问题。我有“标题”，“名字”和“姓”，我需要一个输入框，用户可以完成。这些输入框在我的表单生成器中定义为字段（例如[en_title]）现在，当我写下html代码以显示输出时，块被放在彼此之下。我想把它们放在彼此附近，当我在div风格中使用float时，它们彼此靠近但输入框缩小，而在第一种情况下输入框不缩小。请给我一个解决这个问题的解决方案，这些块彼此靠近并且盒子不会收缩。感谢

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

Answer 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>

Answer 2

所以你有3个div想要水平放置在彼此附近。包含所有这些div的div的宽度是100％。所以每个div的宽度为100/3％。例如，它可以作为Bootstrap。

你可以这样做

运行代码段

const arr = ['aaron', 100];
const m = new Map();
m.set(arr);
m.set(arr, 1);
m.set(['aaron', 100], 10);
m.set(['aaron', 100], 100);
m.set(['aaron', 100], 1000);
m.set(['aaron', 100], 10000);

console.log(m.get(arr));

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

Answer 3

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

Answer 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/

HTML，将div放在彼此附近

4 个答案: