HTML CSS 搜索栏代码示例 - 简单易用

<!DOCTYPE html>
<html>
<head>
	<title>搜索栏</title>
	<style type="text/css">
		.search-box {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 50px;
		}
<pre><code>	.search-box input[type='text'] {
		padding: 10px;
		border: none;
		border-radius: 5px 0 0 5px;
		width: 400px;
		font-size: 16px;
	}

	.search-box input[type='submit'] {
		background-color: #4CAF50;
		color: white;
		border: none;
		padding: 10px;
		border-radius: 0 5px 5px 0;
		cursor: pointer;
		font-size: 16px;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div class="search-box">
		<input type="text" placeholder='请输入搜索内容'>
		<input type="submit" value="搜索">
	</div>
</body>
</html>