Question

<ul style="margin-top: 1pt" id="navlist">
<li style="list-style: none;">
    <FORM METHOD="LINK" ACTION="Home.html">
       <INPUT TYPE="submit" VALUE="Home">
    </FORM>
    <FORM METHOD="LINK" ACTION="Rooms.html">
        <INPUT TYPE="submit" VALUE="Rooms">
    </FORM>
    <FORM METHOD="LINK" ACTION="Contacts.html">
        <INPUT TYPE="submit" VALUE="Contacts">
    </FORM>
</ul>

我不能把它们全部放在同一条线上，或者让它们按顺序排列任何想法？

Answer 1

基本上，li以块显示。您需要为li声明一个特定的CSS规则：

li, form{
display:inline;
}

更新：

正如Alien先生所说，首先检查您的HTML语法。写下类似的东西：

<ul style="margin-top: 1pt" id="navlist">
    <li style="list-style: none;">
        <FORM METHOD="LINK" ACTION="Home.html">
           <INPUT TYPE="submit" VALUE="Home">
        </FORM>
</li>
<li style="list-style: none;">
        <FORM METHOD="LINK" ACTION="Rooms.html">
            <INPUT TYPE="submit" VALUE="Rooms">
        </FORM>
</li>
<li style="list-style: none;">
        <FORM METHOD="LINK" ACTION="Contacts.html">
            <INPUT TYPE="submit" VALUE="Contacts">
        </FORM>
</li>
    </ul>

Answer 2

让<li>＆{39}和<form>显示为内嵌

ul {list-style-type: none;}
ul li {display:inline;}
ul li form {display:inline;}

DEMO jsFiddle

如何在HTML中制作内联按钮

2 个答案: