Question

这个HTML应该显示div然后输入就在它旁边但不是。它在不同的行上显示它们。有什么问题？

<div style="display: inline; float: left;">Title </div><input id="event_title" name="event_title" style="float:right; display: inline; width: 441px;" onclick="clear_field_color(this);"/>

应该是这样的：

Title  [_____________________________________________]

但看起来像这样：

Title 
       [_____________________________________________]

Answer 1

您可以尝试调整line-height，like so的div，但我会说语义上的标签比div更有意义。

Answer 2

你会对浮动感到惊讶：对，只需交换元素的顺序，它就可以正常工作！输入第一个，第二个输入

<input id="event_title" name="event_title" style="float:right; display: inline; width: 441px;" onclick="clear_field_color(this);"/><div style="display: inline; float: left;">Title </div>

Answer 3

如果你在谈论标题和文本框之间的差距，那么只需摆脱float:right

也许在标题之后添加一个填充，例如：

<div style="display: inline; float: left; padding-right:5px;">Title </div>
<input id="event_title" name="event_title" style=" display: inline; width: 441px;" onclick="clear_field_color(this);"/>

Div和输入字段并排

3 个答案: