Как поместить кнопку в текст без прерывания строки?

Question

Я хотел бы поместить кнопку внутри текста, подобного этому:

some text1 [button] some text2.

Однако, если я размещаю форму и ввод, разрыв строки происходит до и после моей кнопки следующим образом:

some text1
[button]
some text2

Я знаю, что могу сделать это с помощью таблиц, но я хочу этого избежать. Есть ли решение на основе CSS для этого? К сожалению, я не могу изменить HTML-код, поэтому мне нужно «вставить» этот небольшой оператор формы (с типом ввода submit и некоторыми скрытыми тегами ввода) в сгенерированный 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

Вот рабочий 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

попробуйте сделать все блоки внутри вашего текста встроенными.

примерно так:

<form style="display: inline">

Если после вашей формы есть div, сделайте их тоже встроенными

Answer 4

Вы должны добавить style="display:inline" к тегу формы

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

дает

hello [button] world