-1

为什么我的表单 div 在父 div 的底部？它想让我说更多，但问题已经被问到并且很清楚......为什么表单 div 出现在我的标题 div 的底部？我知道我可以破解它并给它一个负的上边距，但我知道这不是正确的形式。是什么赋予了？谢谢。

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
     <div id="header">
        <div id="logo"></div>
        <div id="login">
        <input type="text" placeholder="EMAIL ADDRESS" value="" name="email" id="user">

        </div><!-- end login div -->
     </div><!--end header div -->

</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */

body {
    margin: 0px;
    padding: 0px;
}
input {
    float: right;
    margin-left:15px;
}

#header {
    background-image:url(images/headerGradient.png);
    background-repeat: repeat;
    margin:0px;
    padding:0px;
    width:auto;
    height:72px;
    display:block;
}

#logo {
    background-image:url(images/logo.png);
    width: 182px;
    height: 66px;
    vertical-align:middle;
    margin-left: 60px;
}
4

2 回答 2

0

这是因为您的徽标 div 没有设置浮动样式。尝试添加

float:left

到#logo div

演示：http: //jsfiddle.net/eyMJa/1/

于 2013-06-26T21:43:38.267 回答
0

我发现在 Css 中使用 float 变得非常烦人，并且让你想要的布局变得有点困难，除非你可以观看相当多的 youtube 视频，直到你掌握它。

我正在尝试使用：

     position:absolute;

相反，然后设置

    top:Number of Pixels or percentage/em;
    right:Number of Pixels or percentage/em;
    bottom:Number of Pixels or percentage/em;
    left:Number of Pixels or percentage/em;

还

    position:relative;

似乎在 div 的尺寸中添加空白空间再次弄乱了布局，其中 Absolute 的行为有点像浮动，但没有其他两种方法令人讨厌的交互或页面抖动。

如果您出于某种原因使用 float，请记住在每次使用后添加 Clear float，除非您特别需要保留它。

希望这可以帮助

于 2018-04-29T18:39:31.923 回答