为什么修改div2中flex-grow的值页面布局不变啊，仨垂直排列的按钮怎么设置成置中、按钮间间隔相等、水平排列，下面的空白怎么消除啊
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入库title>
<style rel="stylesheet" type="text/css">
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html,body{
height: 100%;
}
body{
display:flex;
flex-direction: column;
}
.div1{
background-color: #DDDDDD;
border: 2px solid;
height: 50px;
width: 100%;
border-bottom: 0;
}
.div2{
border: 2px solid;
width:100%;
flex-grow:2;
border-bottom: 0px;
}
.div3{
border: 2px solid;
width:100%;
flex-grow:1;
}
li{
list-style: none;
float:left;
margin-left: 40px;
margin-top:1px;
position:relative;
left:400px;
}
li:hover{
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
transform: scale(0.9);
transform-origin: center;
border:1px solid rgba(0,0,0,.5);
}
li img{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,.5) 3px 3px;
-moz-box-shadow: rgba(0,0,0,.5) 3px 3px;
box-shadow: rgba(0,0,0,.5) 3px 3px;
}
table{
width:100%;
border-collapse:collapse;
}
table th{
background-color: antiquewhite;
border:solid 1px #AAAAAA;
padding: 5px;
}
table td{
border:solid 1px #AAAAAA;
padding: 5px;
text-align: center;
}
table tr:nth-child(2n+1) {
background-color: #f5f5f5
}
form input{
width: 100%;,
height: 100%;
}
style>
head>
<body>
<form>
<div class="div1">
<ul>
<li><a href="cangchu.html" target=""><img src="kucungailan.png" height="45">a>li>
<li><a href="ruku.html" target=""><img src="ruku.png" height="45">a> li>
<li><a href="chuku.html" target=""><img src="chuku.png" height="45">a>li>
<li><a href="" target=""><img src="nuoku.png" height="45">a>li>
<li><a href="" target=""><img src="pandian.png" height="45">a>li>
ul>
div>
<div class="div2">
<table>
<tr bgcolor="#faebd7">
<th>th>
<th>操作th>
<th>物料编号th>
<th>物料种类th>
<th>物料规格th>
<th>单位th>
<th>参考价格th>
<th>实际单价th>
<th>待入库数量th>
<th>入库数量th>
<th>采购成本小计th>
<th>备注th>
tr>
<tr>
<td>td>
<td>1td>
<td>添加 移除td>
<td>
<select>
<option> 大料Aoption>
<option> 大料Boption>
<option> 大料Coption>
<option> 大料Doption>
<option> 中料Aoption>
<option> 中料Boption>
<option> 中料Coption>
<option> 中料Doption>
<option> 中料Eoption>
<option> 中料Foption>
<option> 油料Aoption>
<option> 油料Boption>
<option> 油料Coption>
<option> 油料Doption>
<option> 油料Eoption>
<option> 油料Foption>
<option> 油料Goption>
<option> 油料Hoption>
<option> 油料Ioption>
select>
td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>
<input type="text" name="" maxlength="20" >
td>
tr>
<tr>
<td>td>
<td>1td>
<td>添加 移除td>
<td>
<select>
<option> 大料Aoption>
<option> 大料Boption>
<option> 大料Coption>
<option> 大料Doption>
<option> 中料Aoption>
<option> 中料Boption>
<option> 中料Coption>
<option> 中料Doption>
<option> 中料Eoption>
<option> 中料Foption>
<option> 油料Aoption>
<option> 油料Boption>
<option> 油料Coption>
<option> 油料Doption>
<option> 油料Eoption>
<option> 油料Foption>
<option> 油料Goption>
<option> 油料Hoption>
<option> 油料Ioption>
select>
td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>
<input type="text" name="" maxlength="20" >
td>
tr>
<tr>
<td>td>
<td>2td>
<td>添加 移除td>
<td>
<select>
<option> 大料Aoption>
<option> 大料Boption>
<option> 大料Coption>
<option> 大料Doption>
<option> 中料Aoption>
<option> 中料Boption>
<option> 中料Coption>
<option> 中料Doption>
<option> 中料Eoption>
<option> 中料Foption>
<option> 油料Aoption>
<option> 油料Boption>
<option> 油料Coption>
<option> 油料Doption>
<option> 油料Eoption>
<option> 油料Foption>
<option> 油料Goption>
<option> 油料Hoption>
<option> 油料Ioption>
select>
td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>
<input type="text" name="" maxlength="20" >
td>
tr>
<tr>
<td>td>
<td>3td>
<td>添加 移除td>
<td>
<select>
<option> 大料Aoption>
<option> 大料Boption>
<option> 大料Coption>
<option> 大料Doption>
<option> 中料Aoption>
<option> 中料Boption>
<option> 中料Coption>
<option> 中料Doption>
<option> 中料Eoption>
<option> 中料Foption>
<option> 油料Aoption>
<option> 油料Boption>
<option> 油料Coption>
<option> 油料Doption>
<option> 油料Eoption>
<option> 油料Foption>
<option> 油料Goption>
<option> 油料Hoption>
<option> 油料Ioption>
select>
td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>
<input type="text" name="" maxlength="20" >
td>
tr>
<tr>
<td>td>
<td>4td>
<td>添加 移除td>
<td>
<select>
<option> 大料Aoption>
<option> 大料Boption>
<option> 大料Coption>
<option> 大料Doption>
<option> 中料Aoption>
<option> 中料Boption>
<option> 中料Coption>
<option> 中料Doption>
<option> 中料Eoption>
<option> 中料Foption>
<option> 油料Aoption>
<option> 油料Boption>
<option> 油料Coption>
<option> 油料Doption>
<option> 油料Eoption>
<option> 油料Foption>
<option> 油料Goption>
<option> 油料Hoption>
<option> 油料Ioption>
select>
td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>
<input type="text" name="" maxlength="20" >
td>
tr>
<tr>
<td>td>
<td>5td>
<td>添加 移除td>
<td>
<select>
<option> 大料Aoption>
<option> 大料Boption>
<option> 大料Coption>
<option> 大料Doption>
<option> 中料Aoption>
<option> 中料Boption>
<option> 中料Coption>
<option> 中料Doption>
<option> 中料Eoption>
<option> 中料Foption>
<option> 油料Aoption>
<option> 油料Boption>
<option> 油料Coption>
<option> 油料Doption>
<option> 油料Eoption>
<option> 油料Foption>
<option> 油料Goption>
<option> 油料Hoption>
<option> 油料Ioption>
select>
td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>
<input type="text" name="" maxlength="20" >
td>
tr>
table>
div>
<div class="div3">
<input type="button" name="" value="保存" onclick="alert('保存成功！')">
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
div>
form>
body>
套了表单后表单用flex布局，而不是body。页脚div3改成flex布局，然后align-items:center居中，justify-content:space-around;设置按钮间距一样，更多flex布局参考阮一峰老师的教程，很详细
改成下面这样，具体看里面的注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入库</title>
<style rel="stylesheet" type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.flexcol {
display: flex;
flex-direction: column;
height:100%
}
.div1 {
background-color: #DDDDDD;
border: 2px solid;
height: 50px;
width: 100%;
border-bottom: 0;
}
.div2 {
border: 2px solid;
width: 100%;
flex-grow: 1;
border-bottom: 0px;
}
.div3 {
border: 2px solid;
width: 100%;
/*flex-grow: 1;*//*这里不用flex-grow，用在div2自动占满剩余的空间*/
display:flex;
justify-content:space-around;
align-items:center
}
li {
list-style: none;
float: left;
margin-left: 40px;
margin-top: 1px;
position: relative;
left: 400px;
}
li:hover {
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
transform: scale(0.9);
transform-origin: center;
border: 1px solid rgba(0,0,0,.5);
}
li img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,.5) 3px 3px;
-moz-box-shadow: rgba(0,0,0,.5) 3px 3px;
box-shadow: rgba(0,0,0,.5) 3px 3px;
}
table {
width: 100%;
border-collapse: collapse;
}
table th {
background-color: antiquewhite;
border: solid 1px #AAAAAA;
padding: 5px;
}
table td {
border: solid 1px #AAAAAA;
padding: 5px;
text-align: center;
}
table tr:nth-child(2n+1) {
background-color: #f5f5f5
}
/*这里改为table变的input，而不是form，要不页脚的按钮也会使用此样式导致显示成100%占满容器*/
table input {
width: 100%;
height: 100%;
}
/*这里单独设置下 页脚按钮的长度宽度什么的*/
.div3 input{
height:30px;
width:200px
}
</style>
</head>
<body>
<form class="flexcol">
<div class="div1">
<ul>
<li><a href="cangchu.html" target=""><img src="kucungailan.png" height="45"></a></li>
<li><a href="ruku.html" target=""><img src="ruku.png" height="45"></a> </li>
<li><a href="chuku.html" target=""><img src="chuku.png" height="45"></a></li>
<li><a href="" target=""><img src="nuoku.png" height="45"></a></li>
<li><a href="" target=""><img src="pandian.png" height="45"></a></li>
</ul>
</div>
<div class="div2">
<table>
<tr bgcolor="#faebd7">
<th></th>
<th>操作</th>
<th>物料编号</th>
<th>物料种类</th>
<th>物料规格</th>
<th>单位</th>
<th>参考价格</th>
<th>实际单价</th>
<th>待入库数量</th>
<th>入库数量</th>
<th>采购成本小计</th>
<th>备注</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>添加 移除</td>
<td>
<select>
<option> 大料A</option>
<option> 大料B</option>
<option> 大料C</option>
<option> 大料D</option>
<option> 中料A</option>
<option> 中料B</option>
<option> 中料C</option>
<option> 中料D</option>
<option> 中料E</option>
<option> 中料F</option>
<option> 油料A</option>
<option> 油料B</option>
<option> 油料C</option>
<option> 油料D</option>
<option> 油料E</option>
<option> 油料F</option>
<option> 油料G</option>
<option> 油料H</option>
<option> 油料I</option>
</select>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type="text" name="" maxlength="20">
</td>
</tr>
<tr>
<td></td>
<td>1</td>
<td>添加 移除</td>
<td>
<select>
<option> 大料A</option>
<option> 大料B</option>
<option> 大料C</option>
<option> 大料D</option>
<option> 中料A</option>
<option> 中料B</option>
<option> 中料C</option>
<option> 中料D</option>
<option> 中料E</option>
<option> 中料F</option>
<option> 油料A</option>
<option> 油料B</option>
<option> 油料C</option>
<option> 油料D</option>
<option> 油料E</option>
<option> 油料F</option>
<option> 油料G</option>
<option> 油料H</option>
<option> 油料I</option>
</select>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type="text" name="" maxlength="20">
</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>添加 移除</td>
<td>
<select>
<option> 大料A</option>
<option> 大料B</option>
<option> 大料C</option>
<option> 大料D</option>
<option> 中料A</option>
<option> 中料B</option>
<option> 中料C</option>
<option> 中料D</option>
<option> 中料E</option>
<option> 中料F</option>
<option> 油料A</option>
<option> 油料B</option>
<option> 油料C</option>
<option> 油料D</option>
<option> 油料E</option>
<option> 油料F</option>
<option> 油料G</option>
<option> 油料H</option>
<option> 油料I</option>
</select>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type="text" name="" maxlength="20">
</td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>添加 移除</td>
<td>
<select>
<option> 大料A</option>
<option> 大料B</option>
<option> 大料C</option>
<option> 大料D</option>
<option> 中料A</option>
<option> 中料B</option>
<option> 中料C</option>
<option> 中料D</option>
<option> 中料E</option>
<option> 中料F</option>
<option> 油料A</option>
<option> 油料B</option>
<option> 油料C</option>
<option> 油料D</option>
<option> 油料E</option>
<option> 油料F</option>
<option> 油料G</option>
<option> 油料H</option>
<option> 油料I</option>
</select>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type="text" name="" maxlength="20">
</td>
</tr>
<tr>
<td></td>
<td>4</td>
<td>添加 移除</td>
<td>
<select>
<option> 大料A</option>
<option> 大料B</option>
<option> 大料C</option>
<option> 大料D</option>
<option> 中料A</option>
<option> 中料B</option>
<option> 中料C</option>
<option> 中料D</option>
<option> 中料E</option>
<option> 中料F</option>
<option> 油料A</option>
<option> 油料B</option>
<option> 油料C</option>
<option> 油料D</option>
<option> 油料E</option>
<option> 油料F</option>
<option> 油料G</option>
<option> 油料H</option>
<option> 油料I</option>
</select>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type="text" name="" maxlength="20">
</td>
</tr>
<tr>
<td></td>
<td>5</td>
<td>添加 移除</td>
<td>
<select>
<option> 大料A</option>
<option> 大料B</option>
<option> 大料C</option>
<option> 大料D</option>
<option> 中料A</option>
<option> 中料B</option>
<option> 中料C</option>
<option> 中料D</option>
<option> 中料E</option>
<option> 中料F</option>
<option> 油料A</option>
<option> 油料B</option>
<option> 油料C</option>
<option> 油料D</option>
<option> 油料E</option>
<option> 油料F</option>
<option> 油料G</option>
<option> 油料H</option>
<option> 油料I</option>
</select>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type="text" name="" maxlength="20">
</td>
</tr>
</table>
</div>
<div class="div3">
<input type="button" name="" value="保存" onclick="alert('保存成功！')">
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</div>
</form>
</body>
</html>
父元素要写 display:flex;
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！