实现一个经典的顶部搜索块，左边是logo图，中间是搜索框，右边是登录部分：
左右拉伸时，两边固定，中间自适应
一：使用margin实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.search {
width: 100%;
height: 40px;
background-color: #eee;
}
.searchBox {
/* 这时不能设置宽度 */
margin: 0 100px;
height: 100%;
background-color: red;
}
.logo,
.login {
width: 100px;
height: 100%;
display: block;
}
.logo {
background-color: blue;
}
.login {
background-color: pink;
}
</style>
</head>
<body>
<div class="search">
<a href="javascript:;" class="logo"></a>
<form action="" class="searchBox">
<input type="text" />
</form>
<a href="javascript:;" class="login">登录</a>
</div>
</body>
</html>
这样的效果如下：
三个块级元素，就会在三行显示，那么怎么让他们在一行显示呢，首先想到的是给三个块级元素设置浮动，这是给三个元素添加浮动后的效果：
可以发现，加了float以后，中间表单的宽度就失效了，不再是父容器的100%了。
所以不能使用float实现，要使用定位的方式实现：
二：使用padding实现：
三：使用flex布局，但是有兼容性，不推荐
网友评论