Несколько вопросов о позициях в форме, css

Question

Я пытаюсь изучить HTML & CSS и попытался создать основную форму входа в систему с эффектами CSS3. Ссылка приведена ниже в коде.

Demo - http://codepen.io/anon/pen/PwaLBE

HTML

<form action="" method=""> 
    <input type="text" name="username" placeholder="Användarnamn"> 
    <input type="password" name="password" placeholder="Lösenord"><br> 
    <input type="submit" name="login" value="Logga in"> 
    <a href="#">Glömt lösenord?</a> 
    <a href="#">Registrera</a> 
</form> 

CSS

body { 
    margin: 0; 
    padding: 0; 
} 

form { 
    margin-top: 200px; 
    font-family: Helvetica, sans-serif; 
    text-align: center; 
} 

/* Input text actions */ 

input[type="text"] { 
    width: 150px; 
    padding: 10px; 
    border: solid 1px #dcdcdc; 
    transition: box-shadow 0.3s, border 0.3s; 
} 

input[type="text"]:hover { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

input[type="text"]:focus { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

/* Input password actions */ 

input[type="password"] { 
    width: 150px; 
    padding: 10px; 
    border: solid 1px #dcdcdc; 
    transition: box-shadow 0.3s, border 0.3s; 
} 

input[type="password"]:hover { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

input[type="password"]:focus { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

/* Input submit-button actions */ 

input[type="submit"] { 
    margin-top: 5px; 
    margin-left: -112px; 
    color: #FFFFFF; 
    background-color: #16a085; 
    padding: 10px; 
    border: solid 1px #FFFFFF; 
    transition: box-shadow 0.3s, border 0.3s; 
} 

input[type="submit"]:hover { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

/* Link actions */ 

a { 
    font-size: 12px; 
    transition: color 0.5s; 
    font-family: Helvetica, sans-serif; 
    text-decoration: none; 
    list-style: none; 
    color: #3498db; 
} 

a:hover { 
    color: #2980b9; 
} 

Есть некоторые проблемы:

1. "glömt lösenord" & «Регистраторы» не находятся под формой пароля справа. Как я могу переместить ссылки вправо точно по форме справа?

2. Кнопка «Logga in», по-видимому, находится в форме слева, но увеличивайте масштаб один или два раза, и положение изменится. Почему у меня есть margin-left: -112px; под Вход для отправки? Эта ценность выглядит странно, но ее она находится под формой слева.

3. И последняя проблема, ссылки «Glömt lösenord» & «Registrera» находятся в середине кнопки слева, как я могу снять их, чтобы они находились на том же уровне, что и кнопка слева ?

4. EDIT: если вы нажмете на кнопку, потребуется некоторое небольшое количество времени, чтобы щелкнуть, как я могу изменить это время, не меняя входные данные?

Answer 1

http://codepen.io/anon/pen/LEraqb

body { 
    margin: 0; 
    padding: 0; 
} 

form { 
    margin-top: 200px; 
    font-family: Helvetica, sans-serif; 
    text-align: center; 
} 

/* Input text actions */ 

input[type="text"] { 
    width: 150px; 
    padding: 10px; 
    border: solid 1px #dcdcdc; 
    transition: box-shadow 0.3s, border 0.3s; 
} 

input[type="text"]:hover { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

input[type="text"]:focus { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

/* Input password actions */ 

input[type="password"] { 
    width: 150px; 
    padding: 10px; 
    border: solid 1px #dcdcdc; 
    transition: box-shadow 0.3s, border 0.3s; 
} 

input[type="password"]:hover { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

input[type="password"]:focus { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

/* Input submit-button actions */ 

input[type="submit"] { 
    margin-top: 5px; 
    margin-left: -112px; 
    color: #FFFFFF; 
    background-color: #16a085; 
    padding: 10px; 
    border: solid 1px #FFFFFF; 
    transition: box-shadow 0.3s, border 0.3s; 
} 

input[type="submit"]:hover { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

/* Link actions */ 

a { 
    font-size: 12px; 
    transition: color 0.5s; 
    font-family: Helvetica, sans-serif; 
    text-decoration: none; 
    list-style: none; 
    color: #3498db; 
} 

a:hover { 
    color: #2980b9; 
} 

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

Я использовал поплавок: правый

Использование flexboxes может быть другой путь.

2- масштабируйте один или два раза и положение изменится.

некоторые размеры были определены в пикселях, поэтому они статичны и не выдерживают всех макетов.

• О негативных полях: https://stackoverflow.com/questions/4989930/using-css-negative-margins-a-good-or-bad-practice http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

3- И последняя проблема, ссылки "Glömt lösenord" & "Registrera" находятся в середине кнопки слева, как может Я снимаю их так, чтобы они находились на том же уровне, что и кнопка слева?

Предпочитаю!

4- Если вы нажмете на кнопку, потребуется некоторое небольшое количество времени, чтобы щелкнуть, как я могу изменить это время, не меняя для входа?

анимация css, похоже, должна закончить до того, как произойдет действие.

Answer 2

Когда вы работаете с формой, предлагается обернуть ее в селектор, как в;

тело должно иметь значение: margin:0 auto;

#mywrapper{ 
    margin:0 27%; /*you can set it by yourself*/ 
    max-width:38%; 
} 

после этого, вы можете обернуть 2 ссылки следующим образом:

ОБНОВЛЕНО:

span .mylinks{ 
    float:right; 
    padding-right:5px; 
} 

так. это должно быть так:

<div id="mywrapper"> 
    <form action="" method=""> 
     <input type="text" name="username" placeholder="Användarnamn" /> 
     <input type="password" name="password" placeholder="Lösenord" /> 
     <br/> 
     <input type="submit" name="login" value="Logga in" /> 
     <a href="#">Glömt lösenord?</a> 
     <a href="#">Registrera</a> 

    </form> 
</div> 

Demo HERE

Answer 3

Есть много вопросов, будет пытаться охватить все.

Прежде всего, удалите text-align: center; на <form>, что упростит решение других задач.

Во-вторых, добавьте <p> или <div> и т. Д., Чтобы обернуть ваши поля ввода.

Также хочу сказать, что я люблю чистоту вашего кода, очень хорошее начало. Не бойтесь использовать некоторые классы или идентификаторы.

См раздувом обновленный код, основанный на вашем, демо - http://jsfiddle.net/78ds0jpt/

HTML

<form action="" method=""> 
    <p> 
     <input type="text" name="username" placeholder="Användarnamn"> 
     <input type="password" name="password" placeholder="Lösenord"> 
    </p> 
    <p> 
     <input type="submit" name="login" value="Logga in"> 
     <span> 
      <a href="#">Glömt lösenord?</a> 
      <a href="#">Registrera</a> 
     </span> 
    </p> 
</form> 

CSS

body { 
    margin: 0; 
    padding: 0; 
} 

form { 
    /* margin-top: 200px; */ 
    font-family: Helvetica, sans-serif; 
    /* text-align: center; */ 
} 

form p { 
    margin: 10px; 
} 

form p span { 
    padding-left: 130px; 
} 

/* Input text actions */ 

input[type="text"] { 
    width: 150px; 
    padding: 10px; 
    border: solid 1px #dcdcdc; 
    transition: box-shadow 0.3s, border 0.3s; 
} 

input[type="text"]:hover { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

input[type="text"]:focus { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

/* Input password actions */ 

input[type="password"] { 
    width: 150px; 
    padding: 10px; 
    border: solid 1px #dcdcdc; 
    transition: box-shadow 0.3s, border 0.3s; 
} 

input[type="password"]:hover { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

input[type="password"]:focus { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

/* Input submit-button actions */ 

input[type="submit"] { 
    margin-top: 5px; 
    /* margin-left: -112px; */ 
    color: #FFFFFF; 
    background-color: #16a085; 
    padding: 10px; 
    border: solid 1px #FFFFFF; 
    transition: box-shadow 0.3s, border 0.3s; 
} 

input[type="submit"]:hover { 
    border: solid 1px #707070; 
    box-shadow: 0 0 5px 1px #969696; 
} 

input[type="submit"]:focus { 
    outline: 0; 
} 

/* Link actions */ 

a { 
    font-size: 12px; 
    transition: color 0.5s; 
    font-family: Helvetica, sans-serif; 
    text-decoration: none; 
    list-style: none; 
    color: #3498db; 
} 

a:hover { 
    color: #2980b9; 
}