having trouble styling the login username form tag

See this jsfiddle.

I want to style开发者_如何学Go the script login form with username and password to the right of the unordered list.

Wrap the a container around both the UL and the form, and assign it a fixed width or a min-width to prevent a float drop (form dropping down below the ul and to the left).

http://jsfiddle.net/6e86p/

Adjust the form width to ensure the 2 fields line up vertically (as in my jsfiddle), or horizontally. If you need to play with the form width, you may want to wrap each label/input pair in a div of fixed with to ensure each label lines up horizontally with its input and doesn't drop below.

Use control + Mouse wheel to make the result pane smaller. You'll see that the login box is in the correct place. No changes needed!

First, wrap your form elements (I used a dl for this)

<form action="/bin/process.php" method="post" enctype="multipart/form-data">
     <dl>
         <dt>
            <label>Username:</label>
         </dt>
         <dd>
<input type="text" value="" />
         </dd>
         <dt>
<label>Password:</label>
         </dt>
         <dd>
<input type="password" value="" />
         </dd>
         <dt></dt>
         <dd>
<input type="submit" value="Login" />
         </dd>
     </dl>
</form>

Then I added the following CSS

dt { width: 50px; float: left; }
dd { margin-left: 100px; }

The result gives you a stacked Username/Password box to the right. See the results here, you will probably need to expand the result section for proper viewing.