Question

这是我的页面代码示例

<body>
<div id="header">
<?php
include 'includes/header.php';
?>
</div>
    <div id="loginpage">
    <div class="data">
        <h5><?php echo $errors ;?></h5>
            <form  class="loginform" action="login.php" method ="post">
         <h5>UserName:</h5>
                <input type="text" name="username" id="s" placeholder="username"  required="required"/><br>
        <h5>Password:</h5>
        <input type="password" name="password" id="s" placeholder="password" />
        <br>


        <input type="submit" id="searchSubmit" value="submit" />
            </form> 
     </div>

<img src="login.jpg" width="400px" height="380px"/>

</div>
<?php
include 'includes/footer.php';
?>
</body>

这是我的css规则

#loginpage
{
width:100%;
height:auto;
background:white;
display:-moz-box;
-moz-box-orient:horizontal;
position:relative;
}
.data {
width:300px;
height:250px;
margin:50px;
margin-top:100px;
padding:10px ;
text-align:left;
background:#e8fccc;
position:relative;
box-shadow: 0px 0px 5px 1px rgb(0,0,0 0.1) ;

}
#loginpage img{
margin:50px;
border-radius:10px;
box-shadow: 0px 0px 5px 1px rgb(0,0,0 0.1) ;
}
.loginform{
margin-top:50px;
}

现在问题是css在div数据（类）中正常工作我定义它的高度250px bt它采用与img标签相同的高度。当我正在增加或降低img标签的高度时，身高正在发生变化

Answer 1

如果您不希望它将overflow:hidden;中的元素形成为.input类

此外，您必须在颜色前面添加＃，否则它将无效。

所以黑色的000000应该是＃000000而没有＃这不好。

这也是不好的做法 margin:50px; margin-top:100px;

如果您想要全部50px的保证金而且只需要100px就位于顶部，那么您应该在右上角的左上方margin:100px 50px 50px 50px。

Answer 2

删除该div class="input"

中的<div class="input">

并使用

input { //without the dot
    width:300px;
    height:250px;
    margin:50px;
    margin-top:100px;
    padding:10px ;
    text-align:left;
    background:e8fccc;
    position:relative;
    box-shadow: 0px 0px 5px 1px rgb(0,0,0 0.1) ;

}

一些css属性不起作用

2 个答案: