Как я могу получить мои поля для выравнивания с моим текстом?
Я также копировал и вставлял код html/css в jsFiddle!
<form
action="http://www.sblogger/cgi-bin/subcomments"
method="post" >
<fieldset name="commentFS" id="commentFS">
<label for="username">Username</label>
<input name="username" id="username" title="Supply your username" required="required"/>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" title="Supply a valid e-mail address" required="required"/>
<label for="password">Password</label>
<input name="password" id="password" type="password" title="You must provide your password" required="required"/>
<label for="commentbox">Comment<br />
(500 character limit)</label>
<textarea maxlength="500" name="commentbox" id="commentbox"></textarea>
<input type="submit" value="Submit Comment"/>
</fieldset>
</form>
здесь вы идете, отредактировал свою скрипку
Это сводится к следующему:
Если вы плаваете left
и right
, вам нужна оболочка, чтобы сохранить комнату для поплавков.
поэтому я добавил следующее:
p {
overflow: hidden;/*this should be clearfix, just for demo it is overflow fix*/
}
label{
display: block;
float: left;
font-size: 0.9em;
width: 20%;/* was 100%*/
margin-top: 5px;
margin-bottom: 5px;
/*clear: left*/
}
и обертка:
<p>
<label for="username">Username</label>
<input name="username" id="username" title="Supply your username" required="required">
</p>
я вижу, что вы используете float
, display
и width:100%;
, у вас определенно слишком много нерегулярных правил здесь.
inline-block
+ width
, можно сделать это и позволить vertiacal-align
метки и входы, float
+ clear
может работать тоже, но vertical-align
не будет доступным: например, с встроенным блоком:
/*Field set styles */
fieldset {
background-color: rgb(245,245,255);
margin: 15px auto;
padding: 5px;
width: 90%;
}
/* Label Styles */
label{
display: inline-block;
font-size: 0.9em;
margin-top: 5px;
margin-bottom: 5px;
width:35%;
}
/*Input control styles */
input, textarea {
font-size: 0.9em;
margin-left: 10px;
margin-right: 10px;
width: 55%;
vertical-align:middle;
}
/*Text area styles */
textarea {
height: 150px;
}