Question

我尝试在所有方向上按像素设置div的宽度和填充，以使它们适合在一起，但它不能以我尝试的任何方式工作。当我放大和缩小一切变化的宽度时。我觉得我的做法是错误的，人们是否有另一种更简单的方法来调整页面中元素的大小和位置？

<!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>

Answer 1

好的，请在小提琴中尝试这些更改：http://jsfiddle.net/ruavcstx/1/

我改变了 - 用户名/密码类

display：block
padding-top：35px; （没有其他设置）
宽度：100％;

我在html中进行了一些小改动（在密码文本框后放置了一个<br/>，以便在下一行出现错误。）

.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;
    width: 150px;
}

.username {
    padding-top: 15px
    display: block;
            text-align: center;
            margin: 0px;
            width: 100%;
            clear: both;
}

.hidden {
        display: none !important;
}

.password {
            padding-top: 15px;
    display: block;
            text-align: center;
            margin: 0px;
            width: 100%;
}
#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;

}

HTML：

    <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"/><Br/>
                    <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>

Answer 2

你能试试吗？

而不是float：left，使用display：inline;和fot测试做对齐中心。并且，调整它的大小。它对我来说很好。

HTML

<div id="loginsignupform" align="center">

到

<div id="loginsignupform">

CSS

#signuptab {
  float: left;
}

到

#signuptab {
    display: inline;
}

Answer 3

您尚未为tabs

提供相应的填充

检查此更新的小提琴：http://jsfiddle.net/ruavcstx/2/

查看CSS更改。希望它有所帮助

div宽度不起作用

3 个答案: