如何在没有换行符的情况下在文本中放置按钮？

Question

我想在文本中放一个按钮，如下所示：

some text1 [button] some text2.

但是，如果我放置表单和输入，则会在我的按钮之前和之后发生换行符，如下所示：

some text1
[button]
some text2

我知道我可以用表格来做这件事，但我想避免它。有没有基于CSS的解决方案来做到这一点？不幸的是，我无法修改HTML代码，所以我必须在生成的HTML（由其他软件完成）中“注入”那个小的表单语句（输入类型提交，以及一些隐藏的输入标记），所以它将是很难重新格式化，使用表格等。

将表单/输入标记放在“p”标记之间的文本中是否合法？

提前致谢。

Answer 1

如果我正确理解了您的问题，那么您正在将包含按钮的表单注入某些文本，而form标记会导致文本换行（form是块级元素）。这是一个简单的CSS修复：

<强> HTML：

some text <form><button>test</button></form> some text

<强> CSS：

form
{
    display:inline;
}

如果您不想对所有表单元素进行全面更改，只需将注入的表单分配给CSS类：

<强> HTML：

some text <form class="inlineForm"><button>test</button></form> some text

<强> CSS：

.inlineForm
{
    display:inline;
}

<强>替代：

您还可以将display:inline直接添加到表单标记：

some text <form style="display:inline"><button>test</button></form> some text

这是a working jsFiddle.

Answer 2

css解决方案是white-space:nowrap。用带有该规则的span标签包裹它。例如，假设您的css文件中包含此规则：

.nowrap {
    white-space:nowrap
}

你可以使用这个html：

<span class="nowrap">some text1 <button>test</button> some text2</span>

Answer 3

您应该将style="display:inline"添加到表单标记

hello <form  style="display:inline"><input type="hidden" value="blah"/><input type="submit" /></form>world

给出

hello [button] world

Answer 4

尝试在文本中创建所有块 - 内联。

像那样：

<form style="display: inline">

如果您的表单后面有div，请将它们内联到