<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#xk{
border:2px black solid;
margin: 0 auto;
height:110px;width:800px;
text-align: center;
}
</style>
</head>
<body>
<div id="xk">
<form id="jz">
<input type=”text” name=”” id=”” value=请输入您的内容 placeholder="请输入您的姓"/>
</form>
<a>女单鞋 |</a>
<a>春夏童装 |</a>
<a>短外套 |</a>
<a>四件套 |</a>
<a>男士衬衫 |</a>
<a>手表男 |</a>
<a>双肩包 |</a>
<a>零食 |</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#xk {
border: 2px black solid;
margin: 0 auto;
height: 110px;
width: 800px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#jz {
font-size: 0;
}
#jz>input {
width: 500px;
height: 35px;
border: 3px solid black;
box-sizing: border-box;
}
#jz>input:focus {
outline-width: 0;
}
#jz>button {
color: white;
background-color: black;
height: 35px;
width: 80px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="xk">
<form id="jz">
<input type="text" placeholder="请输入您的姓名" />
<button>搜索</button>
</form>
<div>
<a>女单鞋 |</a>
<a>春夏童装 |</a>
<a>短外套 |</a>
<a>四件套 |</a>
<a>男士衬衫 |</a>
<a>手表男 |</a>
<a>双肩包 |</a>
<a>零食 |</a>
</div>
</div>
</body>
</html>
用css控制一下你搜索框的样式大小,然后添加一个搜索的背景或者按钮,可以给搜索添加一个点击方法