display: inline; fails when <form> is present

Question

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

#custom  li{
    display: inline;
}
</style>

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

its not lining up side by side.

Answer 1

Add:

#custom form { display: inline; }

<form> is a block level element. Also I'd suggest just using:

#custom { ... }

instead of:

ul#custom { ... }

Answer 2

You need to make the form inline.

#custom li form{
   display:inline;
}

Answer 3

You could achieve this by giving your ul a fixed width and floating your li

ul#custom {

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

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