Question

我正在寻找一种方法将输入控件放在单词“number”之后（在同一行）。

<!DOCTYPE html>
<html>
<body>
<div id="this_can_be_updated">
    Hello.<br/>
    This is some text. I need to put in the third line<br/>
    the number
</div>
<input type="text" value="5">
</body>
</html>

这可以用css完成吗？用其他方式？

限制：使用javascript（使用其ID）动态更新div.innerHtml。所以我想我不能把输入标签放在div中。

Answer 1

最好的方法是将display: inline样式设置为<div>元素：

#this_can_be_updated {
    display: inline;
}

DEMO： http://jsfiddle.net/3H7uT/1/

Answer 2

您可以应用显示CSS属性以在div内容后立即显示文本框。

<div id="this_can_be_updated" style='display:inline'>
    Hello.<br/>
    This is some text. I need to put in the third line<br/>
    the number
</div>
<input type="text" value="5">

Answer 3

VisioN提供的答案是正确的。但我想补充一点。

如果您确实想在<div>标记的末尾添加一些元素，那么最好使用<span>标记。因为是一个块元素。

如果使用div不是强制性的，你可以用下面提到的html替换你的html。

<div>
    <span id="this_can_be_updated">
    Hello.<br/>
    This is some text. I need to put in the third line<br/>
    the number
    </span>
    <input type="text" value="5">
</div>

上面的html将允许您使用span更改id的内容，并在文本末尾显示input字段。

还有另一种情况。理想情况下，html页面中没有两个元素应该具有相同的id。但是，两个元素可能有相同的id this_can_be_updated。在这种情况下，下面的代码更安全

div#this_can_be_updated {
    display: inline;
}

Answer 4

使用Jquery尝试：

$("#this_can_be_updated").append( "<p>Test</p>" );

希望有帮助

Answer 5

采取adeneos回答，您可以减去文本框的边距，如this？

style="margin-left:-200px;"

如何在div文本之后放置一个元素？

5 个答案: