顯示：內聯;當<form>存在時失敗

Question

當 <form>存在時，

display: inline;失敗

它沒有並排排列。

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

 
#custom li{ 
 
    display: inline; 
 
}

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

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

 

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

 

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

Answer 1

添加：

#custom form { display: inline; } 

<form>是塊級元素。另外我建議只使用：

#custom { ... } 

代替：

ul#custom { ... } 

Answer 2

你需要做的形式內嵌。

#custom li form{ 
    display:inline; 
} 

Answer 3

您可以通過給你的UL一個固定的寬度和浮動貴麗

ul#custom { 

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

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

Answer 4

ul li { display:inline-block; } 

作品完美的實現這一目標。