banner区的文本框一直放不在图片上面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Career Builder</title>
<link rel="stylesheet" type="text/css" href="css/common.css">

</head><body>

<div class="allDiv">

     <div class="header">
<img src="images/logo.png" id="imgLogo">
<div class="header_div">
<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">GALLERY</a></li>
  <li><a href="#">FACULTY</a></li>
  <li><a href="#">EVENTS</a></li>
  <li><a href="#">CONTACT</a></li>
</ul>
</div>
     </div>     <div class="banner">
     <img src="images/banner3.jpg" id="imgBanner">
         <div class="banner_div">
            <ul>
       <li><input type="text" value="your name"></li>
       <li><input type="text" name="text"></li>
       <li><input type="text" name="text"></li>
       <li><input type="text" name="text"></li>
       <li><input type="button" value="SEND MESSAGE"></li>
     </ul>
      </div>       </div>

     <div class="ABOUT">

     </div>     <div class="GALLERY">

     </div>     <div class="footer">

     </div>
</div></body>
</html>

*{
margin:0px;
padding: 0px;
}

.header{
width:100%;
height: 80px;
background-color:#07cbc9

}

.header #imgLogo{
width:260px；
height:48px;
margin-left:80px;
margin-top:16px;

}

.header .header_div{
float: right;
margin-right:70px;
}

.header .header_div ul li{
float:left;
margin-right:20px;
height:80px;
line-height:80px;
list-style: none;
}

.header .header_div ul li a{
text-decoration: none;
color: white;
font-family:Microsoft YaHei UI;

}

.header .header_div ul li:hover{
background-color:black;
}

.banner {
width:100%;
height: 600px;

}

.banner #imgBanner{
width:100%;
height: 600px;
position:relative;

}

.banner .banner_div{
position:absolute;
width:100%;
height: 600px;
}

想了半天，一直在图片下面，还有要怎么居中

慕仔0431810 2019-11-17

源自：前端油画商城案例 4-3 项目作业

收起

2回答

芝芝兰兰 2019-11-18 13:57:49

同学你好。

1、width并不是必须500px。这个没有硬性要求。同学可以设置为其他宽度的，只需要将width设置为一个固定的值，然后取一半设置为margin-right的负值即可。这里只是为了接近最终要求效果。

2、header的高度为80px、图片的高度为600px。600px的一半是300px。由于我们要求是在图片的中间，而top是从网页的起始处计算的偏移值。所以top应该是header的全部加上600px的一半。

3、如果只设置top为380px，显示效果还是会偏下。为了让整个表格的中间线看着视觉上居中，所以需要将它“往上拽”。由于我们没有办法直接通过设置div的高度影响整个文本框区域的高度，这个高度是它的实际内容决定的。所以我们需要查看下。

使用F12工具，鼠标放在对应的div上，会显示出它的宽高。可以看到目前div的高显示是106.88px，这里估计为100px就可以了。所以给margin-top设置为-50px。如果想要严格一些，同学设置为-53px也是可以的。同学后面的编写中，当然也可以通过给input设置margin和padding来改变input的效果。届时也可以通过这个方式来查看。

如果解答了同学的疑问，望采纳~

祝学习愉快~

收起回答

芝芝兰兰 2019-11-18 11:05:38

同学你好。同学已经给文本框的父div加了定位，只需设置它的top和right即可。

1、设置左右居中，定位right为50%后，div的左边框距浏览器右边有了全屏幕50%的宽度，所以还需要“拽回来”自身宽度的一半才能让它的中心线是居中的。也就是说需要设置宽度width:500px;然后设置margin-right: -250px;

2、类似的。header部分高度是80px，图片的高度是600px，所以top可以设置为380px。又因为文本框区域实际的高度约为100px，所以可以设置margin-top为-50px。

虽然给外层的div设置了宽度，里面的input并不会自动填充满这个宽度，所以需要给input框设置一下width为100%

.banner .banner_div{
 position:absolute;
 top:380px;
 right:50%;
 margin-top:-50px; 
 margin-right: -250px;
 width:500px; /*设置宽度后得出的margin-right*/
 text-align: center; /*button居中*/
}

input[type="text"]{
    width: 100%;
}

如果解答了同学的疑问，望采纳~

祝学习愉快~

收起回答

提问者慕仔0431810 #1

right50% 文本框的左边线离右边有50%的距离，要居中的话必须拉回自身宽度的一半，这个我懂了。但是怎么得出width要设置500px，是靠什么依据？还有高度header 80Px 和图片 600Px又是怎么得出Top380Px的？文本框高度什么的都怎么判断出来的太混乱了，老师能一步一步地详细说明一下嘛

2019-11-18 11:29:51