Поле ввода выровнено с текстом?

Question

Поле ввода выровнено с текстом?

0

Как я могу получить мои поля для выравнивания с моим текстом?

Я также копировал и вставлял код 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>

user3444920 21 март 2014, в 16:00

Источник

0

сделайте несколько проверок здесь purecss.io/forms и будьте счастливы!
rafaelcastrocouto 21 март 2014, в 14:28

Теги:

html

css

2 ответа

0

я вижу, что вы используете 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;
}

http://jsfiddle.net/EFByC/58/

G-Cyr 21 март 2014, в 12:02

Ещё вопросы

сделайте несколько проверок здесь purecss.io/forms и будьте счастливы!

Mark · Accepted Answer · 2014-03-21T13-10-00.000Z

здесь вы идете, отредактировал свою скрипку

Это сводится к следующему:

Если вы плаваете 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>