Форма выравнивания действующая weird

Я пытаюсь, чтобы мои формы плавали вправо, так что она выглядит аккуратно, когда все находится рядом друг с другом, и все работает отлично, ЗА ИСКЛЮЧЕНИЕМ для первых 2? Это то, что меня пугает? Он отлично работает после того, как первый 2. Вот скриншот, который говорит, что все это и мой HTML кодФорма выравнивания действующая weird

<head> 
<title>New user</title> 
<style type="text/css"> 
    #form_container { 
     width: 25%; 
    } 

    #form_container input { 
     float: right; 
     clear: both; 
    } 
</style> 
</head> 

<body> 

    <div id="form_container"> 
     <form action="" method="post"> 
      Username: <input type="text" name="username" value="" /><br /> 
      Password: <input type="text" name="username" value="" /><br /> 
      Password again: <input type="text" name="username" value="" /><br /> 
      Password triple: <input type="text" name="username" value="" /><br /> 
     </form> 
    </div> 

</body>

Screenshot example

Почему что «пространство» между первым и вторым из них?

Спасибо заранее!

источник

2013-11-07 Seerex

Попробуйте использовать тег 'label', чтобы обернуть вокруг ввода и текста. Таким образом, ' Username: ' –

Просто попробовал, не решил :(тот же вопрос – Seerex

См. ответ Шона. –

Это просто потому, что вы просите пароль 3 раза .. разметка не нравится и бросает вам случайный пробел.

Судя по всему, есть несколько способов исправить это. Самый простой способ - установить clear:both на br .., что вызывало разрыв.

jsFiddle example

br { 
    clear:both; 
}

Кроме того, удалить clear:both из #form_container input как больше не требуется.

#form_container input { 
    float: right; 
}

Я также предлагаю добавить label на каждый вход для целей проверки.

источник

2013-11-07 19:43:36

Ха-ха, это заставило меня рассмеяться! Я был таким, на самом деле?когда я прочитал первые 2 строки ^^ Это зафиксировало его чемпион, и я отвечу на ур-ответ, когда он позволит мне через 3 минуты :) спасибо кучу! – Seerex

Реструктурируйте свою разметку, чтобы добавить ярлыки (которые вы могли бы в любом случае), и вы можете полностью удалить <br>. Работа здесь примера: http://jsfiddle.net/designingsean/rWfek/1/

HTML:

<div id="form_container"> 
    <form action="" method="post"> 
     <label>Username</label> 
     <input type="text" name="username" value="" /> 
     <label>Password</label> 
     <input type="text" name="username" value="" /> 
     <label>Password again</label> 
     <input type="text" name="username" value="" /> 
     <label>Password triple</label> 
     <input type="text" name="username" value="" /> 
    </form> 
</div>

Важного бит CSS:

label { 
    float:left; 
    width:50%; 
}

источник

2013-11-07 19:46:59

Первый ответ хорошо, но я также предлагаю оборачивать все в label.

Преимущество в том, что, когда вы нажимаете на текст ярлыка, «Username:», он автоматически помещает фокус в поле ввода. Хотя это может показаться небольшим, оно действительно помогает на сенсорных устройствах, и особенно на радиовходах, - попробуйте постукивать небольшим радиокамером 10x10. Гораздо приятнее и интуитивно понятным с label.

<label>Username: <input type="text" name="username" value="" /></label>

и в CSS:

#form_container label { 
    display:block; 
    clear:both; 
}

Кроме того, если вы не знаете этого, я предлагаю использовать <input type="password"/> для паролей.

См. Это JSFiddle.

источник

2013-11-07 19:47:31

Форма выравнивания действующая weird

ответ

Смежные вопросы