Порядок кнопок по горизонтали с css

Question

Как и в предыдущем вопросе, я столкнулся с небольшой ошибкой, выкладывающей некоторые горизонтальные кнопки. Не уверен, что это связано с моим отсутствием знаний о javascript или кнопках.

По сути, у меня есть список кнопок на верхней панели навигации, которые должны быть встроенными, но, кажется, складываются.

Каждая простая кнопка переносит фрейм на другую страницу (да, я знаю, что фреймы - это зло, но этот проект должен отображать внешние страницы и подходит для этой цели http://webdesign.about.com/od/framesprosandcons/a/aaframesyuck.htm)

В любом случае. Вот как это выглядело, когда ссылки были просто ссылками, а не кнопками.

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

А вот и вышедшая из строя версия:

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

код этих ссылок в виде кнопок выглядит следующим образом:

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;
        }

Потенциальными решениями было бы изменение кнопок с javascript на какой-то интерфейс JQuery, но это просто простые ссылки. Может быть, что-то отсутствует в моем CSS?

Answer 1

form является элементом уровня блока, поэтому каждый элемент формы отображается в отдельной строке.Если в одной форме есть две или более кнопок, то эти кнопки будут показываться как обычно.Попробуйте:

form {
display: inline;
}

Answer 2

Или вы можете отобразить li как элементы встроенного блока, например this

Answer 3

Чтобы сделать любую горизонталь лимитом, вы должны плавать.Вы должны изменить .links li

.links li{
 padding: 0 5px;
 float: left;
}

Пожалуйста, проверьте решение здесь