양식의 모든 요소에 대해 10px의 여백을 얻으려고 노력합니다.

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

  •  02-01-2020
  •  | 
  •  

문제

메일과 암호를 묻는 양식이있는 로그인 상자를 수행합니다.

나는 모든 요소를 수직으로 가지고 있으며, 모든 요소가 10px 마진 상단과 아래로 유지되도록 모든 요소를 정렬하려고 시도하고 동일한 공간을 가진 모든 요소를 얻으 려합니다.

그러나이 목표에 성공을 가지지 않고, 내가 가진 것을 이해하는 데 도움을 줄 수 있습니까?

나는 나의 요소에 대한 배경을 내 요소에 쉽게 알 수 있도록 더 쉽고, 어떤 배경은 수레에 문제가 있어야하는 것처럼 보이는 것처럼 보입니다.

이것은 IM을 얻는 내 JSFiddle입니다.

http://jsfiddle.net/hp8zv/1/hp/a>

내 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