дисплей: встроенный; терпит неудачу, когда <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> 
 
    \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

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

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

Работает идеально.