请批改，谢谢
来源：7-4 项目作业
晓舟
2021-11-19 16:07:34
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main">
<div class="searchModel">
<input type="text" name="searchInfo" id="searchInfo" placeholder="请输入">
<input type="button" value="搜索" class="submitButton">
</div>
</div>
</body>
</html>
*{
margin:0px;
padding:0px;
}
body{
width:100%;
height: 100%;
background-color:mistyrose;
}
.main{
position: relative;
width:100%;
}
.main .searchModel{
width:320px;
position: absolute;
top:400px;
left:50%;
margin-left:-160px;
}
.main .searchModel #searchInfo{
width:220px;
height:25px;
border-color:red;
background-color:mistyrose;
border-width: 2px;
outline: none;
}
.main .searchModel #searchInfo{
width:220px;
height:25px;
border-color:red;
background-color:mistyrose;
}
.submitButton{
width:42px;
height:29px;
background-color: red;
color:#FFF;
margin-left: -5px;
}
1回答
-
同学你好，代码整体完成的不错，但还是可以优化的，根据作业效果按钮和搜索框周围是没有灰色显示的，而同学的效果会有，如下
可以给按钮设置border: none;
给搜索框设置border: 2px solid red;
设置后效果如下
此时按钮和搜索框稍微有点没有对齐
可以给按钮设置个定位，并向下移1px
position: relative;
top:1px;
祝学习愉快~
0
相似问题