div/在段落中间输入

Question

我正在尝试在段落中间对齐包含输入的 div。鉴于 div 无法以有效的方式包含在段落中，我需要使所有三个元素对齐内联块。

第一段比较小，div大约350px，最后一段真的很长。它的最后一段给我带来了问题，因为当文本到达页面末尾时它不会自动换行 - 而是整个段落换行到新行。

<p style="display:inline-block">Blah Blah Blah Text Goes Here:</p>

<div style="display:inline-block width:350px;"><input name="blah" value="123456yg323456y23456yr345yr3456tr3454345"></div>

<p style="display:inline-block">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>

我得到的输出如下所示：

Blah Blah Blah Text Goes Here: <-------------div input goes here ------------->

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 

我正在寻找如下所示的输出：

Blah Blah Blah Text Goes Here: <-------------div input goes here -------------> blah blah blah blah blah blah blah

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 

blah blah blah blah blah blah blah blah blah blah

从 div 中删除输入不是一个选项。

如何以响应方式正确获得所需的输出？

Answer 1

尝试display: inline<p style="display:inline">Blah Blah Blah Text Goes Here:</p><div style="display:inline; width:350px;"><input name="blah" value="123456yg323456y23456yr345yr3456tr3454345"></div><p style="display:inline">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>