【发布时间】：2014-11-01 15:41:37
【问题描述】：
我尝试在所有方向上按像素设置 div 的宽度和填充，以使它们组合在一起，但我尝试的任何方式都不起作用。当我放大和缩小时，一切的宽度都会发生变化。我觉得我做错了，还有其他更简单的方法来调整页面中元素的大小和位置吗？
JsFiddle：http://jsfiddle.net/ruavcstx/
<!DOCTYPE html>
<html>
<head>
<style>
.background {
background-color: #2ECCFA;
}
#signupform {
clear: both;
background-color: #e9c85d;
display: table;
padding: 33px 29px 33px 29px;
}
#loginform {
background-color: #4daf7c;
display: table;
clear: both;
padding: 0px;
}
.username {
padding: 15px 35px ;
display: table;
text-align: center;
margin: 0px;
width: 150px;
clear: both;
}
.hidden {
display: none !important;
}
.password {
padding: 15px 35px ;
display: table;
text-align: center;
margin: 0px;
width: 150px;
margin: 0;
}
#loginbtn {
padding: 15px 39px ;
background-color:#404241;
display: table;
text-align: center;
margin: 0px;
width: 150px;
cursor: pointer;
display: block !important;
}
#logintab {
border: 5px solid #4daf7c;
background-color: #4daf7c;
padding: 15px 20px;
float: left;
cursor: pointer;
margin: 0px;
}
#signuptab {
border: 5px solid #e9c85d;
background-color: #e9c85d;
padding: 15px 14px;
float: left;
cursor: pointer;
margin: 0px;
display: inline;
}
#skiptab {
border: 5px solid #404241;
background-color: #404241;
padding: 15px 12px 15px 12px;
float: left;
cursor: pointer;
margin: 0px;
color: red;
}
#signupbtn {
padding: 5px 39px ;
background-color:#404241;
display: table;
text-align: center;
width: 150px;
cursor: pointer;
display: block !important;
color: red;
}
#signupform p, #loginform p {
display: inline;
color: red;
}
</style>
</head>
<body class="background">
<div id="loginsignupform">
<div class="tabs">
<div id="logintab"> login </div>
<div id="signuptab"> sign up </div>
<div id="skiptab"> skip </div>
</div>
<div>
<div id="loginform">
<div class="username">
<input type="text" placeholder="username" name="username"/>
</div>
<div class="password">
<input type="password" placeholder="password" name="password"/>
<p> invalid username or password! </p>
</div>
<p id="loginbtn"> login </p>
</div>
<div id="signupform" >
<input type="text" placeholder="full name" name="name" /><br>
<p> full name is required </p><br>
<input type="username" placeholder="username" name="username" /><br>
<input type="text" placeholder="e-mail"/><br>
<input type="password" placeholder="password" name="password" /><br>
<input type="password" placeholder="re-enter password" name="password1" /><br>
</div>
<div id="signupbtn">
<p > sign up </p>
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
-
你能放小提琴并提供链接
-
老实说，看起来一切正常：jsfiddle.net/ruavcstx
-
@Khaleel 我已经添加了
-
@CBauer 绿色登录 div 未与顶部的选项卡对齐
-
您已将该 div 中的子元素设置为 150px 宽度，并在左侧和右侧为它们提供 35px 的填充。这迫使父级比控件顶部的选项卡更宽。