CODEWITHSUNDEEP
htmlcssformsbutton
LGB
LGB

Reputation: 718

How can I put a button inside text without line-breaks occuring?

I would like to put a button inside text like this one:

some text1 [button] some text2.

However if I place form&input, line break occures before and after my button like this:

some text1
[button]
some text2

I know I can do this with tables, but I want to avoid it. Is there any CSS based solution to do this? Unfortunately, I can't modify the HTML code, so I have to "inject" that little form statement (with input type submit, and some hidden input tags too) in the generated HTML (done by other software), so it would be hard to reformat it, using tables, etc.

Is it even legal to put form/input tags within text which is enclosed between 'p' tags?

Thanks in advance.

Upvotes: 1

Views: 9879

Answers (4)

uɥƃnɐʌuop
uɥƃnɐʌuop

Reputation: 15093

The css solution is white-space:nowrap. Wrap it with a span tag with that rule. For example, assuming you have this rule in the your css file:

.nowrap {
    white-space:nowrap
}

You can do it with this html:

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

Upvotes: 7

James Hill
James Hill

Reputation: 61792

If I understand your question correctly, you're injecting a form that contains a button into some text and the form tag is causing the text to wrap (form is a block level element). This is a simple fix with CSS:

HTML:

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

CSS:

form
{
    display:inline;
}

If you don't want to make a blanket change to all the form elements, simply assign the injected form a CSS class:

HTML:

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

CSS:

.inlineForm
{
    display:inline;
}

Alternative:

You could also add display:inline directly to the form tag:

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

Here's a working jsFiddle.

Upvotes: 5

pleerock
pleerock

Reputation: 18836

try to make all blocks among your text - inline.

like that:

<form style="display: inline">

If there are divs after your form, make them inline too

Upvotes: 0

Paul Creasey
Paul Creasey

Reputation: 28824

You should add style="display:inline" to the form tag

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

gives

hello [button] world

Upvotes: 0

Related Questions