Search code examples
htmlcsshref

Making all three 3 HTML links display on the same line with HTML/CSS?

I have the following HTML (removed some of the form input tags to make the code minimal for readability):

<a href="add.html">Add</a> <a href="remove.html">Remove</a>

<form action="">
    <a href="" onclick="parentNode.submit();return false;">Submit</a>
</form>

Its basically three links, the last link is a link which mimics the functionality of a form submit button (I wanted it as a link and appears the only cross-browser way was with justing using a link with JavaScript - although I understand it would require JavaScript to be enabled).

This is probably second nature to some but I can't seem to get the three links on the same line next to each other, it ends up displaying the the last link on the next line (I believe its because the last link is wrapped in form tags?).

Is there a way to solve this by perhaps wrapping them in a div with a CSS class of some sort (just an idea)?

Solution

  • Add display:inline; or display:inline-block to your form element. Eg:

    <form style="display:inline">

    Fiddle: http://jsfiddle.net/gJqvr/1/