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 UI，但它们只是简单的链接。也许我的CSS中遗漏了一些东西？

Answer 1

form是块级元素，因此每个表单元素都出现在它自己的行上。如果一个表单有两个或更多按钮，则那些按钮将按预期显示为内联。尝试：

form {
display: inline;
}

Answer 2

或者您可以将li显示为内联块元素，例如this

Answer 3

要使任何li水平，你必须漂浮它。你必须修改.links li

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

请检查解决方案here

用css水平订购按钮

3 个答案: