Question

As per a previous question I’ve run into a bit of a bug laying out some horizontal buttons. Failry certain it has to do with my lack of knowledge on javascript or buttons.

Basically I have list of buttons on a top Nav bar that are supposed to be inline but seem to stack.

Each button simple takes a frame to a different page (yes I’m aware frames are evil but this project needs to render external pages and It suits this purpose http://webdesign.about.com/od/framesprosandcons/a/aaframesyuck.htm)

Anyways. Heres what it looked like when the links were just links and not buttons.

http://s1180.photobucket.com/albums/x406/0vertone/?action=view&current=linkcorrect.jpg

And here is the bugged out version:

http://s1180.photobucket.com/albums/x406/0vertone/?action=view&current=buttonBug.jpg

code for these links as buttons is as follows:

HTML

        <ul class = "links">
            <li>
                <!--<a href="http://www.google.ie" target ="content">Test</a>-->
                <form method="link" action="http://www.google.ie" target = "content">
                    <input type="submit" value="google">
                </form>

                |
            </li>
            <li>
                <!--<a href="dashboard.html.erb" target ="content">Dash</a> |-->
                <form method="link" action="http://www.google.ie" target = "content">
                    <input type="submit" value="google">
                </form>

                |
            </li>
            <li>
                <!--<a href="pageview.html.erb" target ="content">Page</a> |-->
                <form method="link" action="http://www.google.ie" target = "content">
                    <input type="submit" value="google">
                </form>

                |
            </li>
            <li>
                <!--<a href="listview.html.erb" target ="content">List</a>-->
                <form method="link" action="http://www.google.ie" target = "content">
                    <input type="submit" value="google">
                </form>

                |
            </li>
        </ul>

CSS:

        ul li.prev {
            float:left
        }
        .links {
            margin: 0;
            padding: 0;
            background: #666;
            text-align: right;
        }
        .links li {
            display: inline;
            padding: 0 5px;
        }

Potential solutions would be changing the buttons from javascript to some sort of JQuery UI but Their just simple links. Perhaps theres something missing in my css?

Answer 1

form is a block level element hence every form element appears on a row of its own. If one form has two or more buttons then those button will appear inline as expected. Try:

form {
display: inline;
}