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

Answer 3

Этого можно достичь, задав фиксированную ширину ul и переместив li

ul#custom {

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

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

Answer 4

Добавить:

#custom form { display: inline; }

<form> является элементом уровня блока. Также я бы предложил просто использовать:

#custom { ... }

вместо:

ul#custom { ... }