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

Question

我想在文本中放一个按钮,如下所示:

some text1 [button] some text2.

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

some text1
[button]
some text2

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

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

提前致谢.

Answer 1

CSS 的解决方案是white-space:nowrap. 用该规则的 span 标签将其包裹起来。例如，假设您的 css 文件中有此规则：

.nowrap {
    white-space:nowrap
}

你可以用这个 html 来做到这一点：

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

Answer 2

如果我正确地理解了你的问题,那么你将一个包含一个按钮的表单注入到某个文本中,并且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