显示：内联; <form>出现时失败</form>

Question

当display: inline;存在时

<form>失败

它没有并排排列。

ul#custom {
float:right;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

#custom  li{
    display: inline;
}

    <ul id="custom"><li>
    		<form name="form1" method="post" action="checklogin.php">

    				<label for="field_1">Login ID (Your Email)</label>
    				<input type="text" name="myusername" id="field_1" class="short" />


    				<label for="field_1">Password</label>
    				<input type="password" name="mypassword" id="field_1" class="short" />


    				<input type="submit" class="submit" value="Login" />
    			</form>
    </li> <li> **should appear right beside the login form not under it. **</li></ul>

Answer 1

ul li { display:inline-block; }

完美无缺。

Answer 2

添加：

#custom form { display: inline; }

<form>是块级元素。我还建议你使用：

#custom { ... }

而不是：

ul#custom { ... }

Answer 3

您需要将表单内联。

#custom li form{
   display:inline;
}

Answer 4

你可以通过给你的ul一个固定的宽度和漂浮你的

来实现这一点

ul#custom {

width:1000px;
padding:0;
margin:0;
list-style-type:none;
}

#custom  li{
    display: inline; float: left;
}