CODEWITHSUNDEEP
htmlcssformsinputsend
Optimistic
Optimistic

Reputation: 35

How to keep these two elements next to eachother

So earlier I was coding my websites contact form, and I wanted to make it so I had to options, to go back or send. But I noticed that they weren't together. Now, I know that this is probably a very dumb question but I just got back from vacation so I have a huge brain fart. I would love all the help I could get.

Here is my HTML:

<p>Go Back <sup>or</sup></p><input type="submit" value="Send!" name="submit" />

I wish I could show an image but I can't at the moment.

Upvotes: 0

Views: 603

Answers (2)

ryanhightower
ryanhightower

Reputation: 118

The <p></p> tags act like a break to segment content in an HTML document. Include the Submit button inside the paragraph to avoid the break.

<p>Go Back <sup>or</sup> <input type="submit" value="Send!" name="submit" /></p>

Upvotes: 0

user1467267
user1467267

Reputation:

Add this style to the <p> tag:

display: inline-block;

Example: http://jsfiddle.net/jUS7Y/1/

p {
    display: inline-block;
}

Try to use a class or id on it tho, or else all <p>-tags will turn into inline-blocks.

HTML

<p class="myDescription">Go Back <sup>or</sup></p>
<input type="submit" value="Send!" name="submit" />

CSS

.myDescription {
    display: inline-block;
}

Upvotes: 1

Related Questions