[HTML][CSS] Rozmieszczeni formularza Opcje

[Lethys]

Witam,

Obecnie staram się dostosować szablon do swoich wymagań ale napotkałem problem z stworzeniem właściwie wyglądającego formularza.

Wygląda to tak:




Chodzi oczywiście o to aby <label> pokazywało się przed polem formularza a nie za nim jak to obecnie jest oraz o przesunięcie przycisku.

Kod html:

[PHP] pobierz, plaintext 
        <div class="features">
            <div class="features-container">
                <div id="sliders">
				<h3>Szybka rejestracja</h3>
                <form method="post" action="rejestracja.php?action=register" id="newsletter">
			<ul class="form">
					<li><label for="imie">Imię</label><input name="imie" type="text" maxlength="10"/></li>
					<li><label for="email">Adres email</label><input name="email" type="text" maxlength="50"/></li>
					<li><label for="email">Powtórz email</label><input name="vemail" type="text" maxlength="50" /></li>
					<input name="referujacy" type="hidden" value="'.$ref.'" "/><br>
					<li><input type="submit" value="Rejestruj" /></li>
					</ul>
				</form>
                </div>
            </div>
            <ul id="pager"></ul>
        </div>
[PHP] pobierz, plaintext 

Kod CSS:

[PHP] pobierz, plaintext 
 
ul.custom-list {
    list-style:none;
    margin-bottom:12px;
}
ul.custom-list li {
    padding-left: 20px;
    background:url('../images/bullet.png') no-repeat 0 8px;
    line-height:30px;
}
 
/* Basic Layout */
 
.form {
	list-style:none;
	list-style-image:none;
	margin:0;
	padding:0;
}
.form input, .form textarea {
	width:300px;
}
.form label {
	display:inline-block;
	padding-top:2px;
	padding-left:2px;
	vertical-align:top;
	width:100px;
 
}
.features {
    width:500px;
    float:right;
}
.features-container {
    box-shadow:#cecece 0 0 5px;
   -moz-box-shadow:#cecece 0 0 5px;
   -webkit-box-shadow:#cecece 0 0 5px;
    border-radius:10px;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
    background:#fff;
    padding:10px;
    line-height:0;
}
#sliders {
    width:480px;
    height:270px;
    overflow:hidden;
}
 
#newsletter {
    float:left;
    line-height:36px;
}
#newsletter input[type=text] {
    float:left;
    background:#fff;
    width:190px;
    border:1px solid #9eb7bc;
    height:18px;
    padding:5px;
    box-shadow:inset #ccc 0 1px 5px;
   -moz-box-shadow:inset #ccc 0 1px 5px;
   -webkit-box-shadow:inset #ccc 0 1px 5px;
    border-radius:4px;
   -moz-border-radius:4px;
   -webkit-border-radius:4px;
}
#newsletter input[type=submit] {
    display:block;
    float:left;
    width:auto;
    height:30px;
    border:0;
    background:url('../images/submit-gradient.png') repeat-x 0 0 #9eb7bc;
    color:#d9d9d9;
    text-shadow:0 1px 1px #222;
    border-radius:3px;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
    margin-left:-11px;
}
#newsletter input[type=submit]:hover {
    background:url('../images/submit-gradient.png') repeat-x 0 -30px #9eb7bc;
    color:#fff;
    cursor:pointer;
}
#newsletter input[type=submit]:active {
    background:url('../images/submit-gradient.png') repeat-x 0 -60px #9eb7bc;
    outline:0;
}
/* Image gallery */
 
[PHP] pobierz, plaintext 

Kombinowałem na kilka sposobów ale nie osiągnąłem swojego celu. Jak zrobić poprawnie ten formularz?

[prowseed]

[CSS] pobierz, plaintext 
#newsletter input[type=text] {
    float:left;
    background:#fff;
    width:190px;
    border:1px solid #9eb7bc;
    height:18px;
    padding:5px;
    box-shadow:inset #ccc 0 1px 5px;
   -moz-box-shadow:inset #ccc 0 1px 5px;
   -webkit-box-shadow:inset #ccc 0 1px 5px;
    border-radius:4px;
   -moz-border-radius:4px;
   -webkit-border-radius:4px;
}
[CSS] pobierz, plaintext 

To znaczy na jakie sposoby kombinowales? Bo mi sie wydaje, ze na zadne. Dla tego co powyzej daj display:inline-block; i wykresl float:left;
A przesuniecie przycisku, czyli co? Margin-left ?