Пытаясь получить максимальную вершину 10px для всех моих элементов формы

StackOverflow https://stackoverflow.com//questions/24063446

  •  02-01-2020
  •  | 
  •  

Вопрос

Я делаю вход в систему с формой, который просит электронную почту и пароль.

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

Но я не склоняюсь к этой цели, вы можете дать некоторую помощь понять, что я ошибаюсь?

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

Это мой jsfiddle с тем, что я получаю:

http://jsfiddle.net/hp8zv/1/

Мой HTML: 

<body>
<div class="loginbox">
    <h1>Login Form:</h1>
    <span class="ms in">Enter your acess data.</span>
    <form name="login">
        <label class="label">
            <input placeholder="Email" type="text" />
        </label>
        <label class="label">
            <input type="password" placeholder="Pass"  class="pass"  />
            <input type="submit" value="Login" class="btn" />
            <a href="#" class="link">Forgot</a>
        </label>        
    </form>    
</div>
</body>
.

Мои CSS: 

*{margin:0; padding:0;}
body{overflow:hidden;}

.loginbox{position:absolute; left:50%; top:50%;background:#f7f7f7; width:360px; height:340px;}
.loginbox{margin-left:-180px; margin-top:-162px; background:pink;}
.loginbox h1{padding:20px; font-weight:200; color:#fff; background:brown; font-size:30px;}
.loginbox form{padding:20px; background:yellow;}
.loginbox form .label{display:block; margin-bottom:10px; margin-top:10px; float:left; width:320px;background:green;}
.loginbox form .label input{padding:10px; font-size:16px; border:1px solid #CCC; width:299px; float:left;}
.loginbox form .label .pass{width:299px; float:left;}
.loginbox form .label .btn{float:right; width:auto; display:block; background:brown; border:none; text-transform:uppercase; margin:20px auto;}
.loginbox form .label .btn{padding:11px 10px 11px; color:#fff; font-weight:bold; cursor:pointer; width:320px;}
.loginbox form .link {text-align:center; text-decoration:none; color:#000; background:blue;}

.ms{padding:20px 10px 5px 20px;float:left;display:block;  width:320px; background:red;
.

}

Это было полезно?

Решение

Вот ваш новый код: 

<body>
<div class="loginbox">
    <h1>Login Form:</h1>
    <span class="ms">Enter your acess data.</span>
    <form name="login">
            <input placeholder="Email" type="text"/>
            <input type="password" placeholder="Pass"/>
            <input type="submit" value="Login" class="btn"/>
            <a href="#">Forgot</a>
    </form>    
</div>
</body>

*{
    margin:0;
    padding:0;
    border: 0;
}
.loginbox *{
    box-sizing:border-box;
}
.loginbox{
    position:absolute;
    left:50%;
    top:50%;
    background:#f7f7f7;
    width:360px;
    height:290px;
    margin-left:-180px;
    margin-top:-162px;
    background:pink;
}
.loginbox h1{
    padding:20px;
    font-weight:200;
    color:#fff;
    background:brown;
    font-size:30px;
}
.loginbox form{
    padding:20px;
    background:yellow;
}
.loginbox form input{
    margin-top: 10px;
    padding:10px;
    font-size:16px;
    width:100%;
    float:left;
}
.loginbox form .btn{
    background:brown;
    text-transform:uppercase;
    margin:10px auto;
    padding:10px;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
    width:100%;}

.ms{
    padding:10px 10px 10px 20px;
    float:left;
    width:100%;
    background:red;
}
.loginbox form a {
    text-align:center;
    text-decoration:none;
    color:#000;
    background:blue;
}
.

Вот скрипка

Надеюсь, я помог вам

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top