是这样的,我定义了一个搜索框search,左侧是input输入框,右侧是搜索按钮button,然后搜索框宽度和input输入框宽度都是按照网页大小测量做的,我的思路就是搜索框的宽度减去输入款的宽度就是搜索按钮的宽度,但是发现用这个宽度就有一个问题,就是太大了,装不下。我看视频讲解的是去测量了网页的真实宽度,然后用这个宽度作为搜索框的宽度,发现这个宽度与盒子是刚好的,我就觉得很奇怪,为什么啊?有谁知道的可以解答一下我的疑惑吗,感谢,好人一生平安!
<!-- 3.搜索框部分 -->
<div class="search">
<input type="text" value="输入关键词">
<button></button>
</div>
/* 3.搜索框部分 */
.search {
float: left;
width: 412px;
height: 42px;
margin-left: 60px;
}
.search input {
display: block;
float: left;
width: 342px;
height: 40px;
font-size: 14px;
border: 1px solid #00a4ff;
border-right: 0;
color: #bfbfbf;
/* 注意:因为.search设置了宽度,加了padding会撑大盒子
所以width要减去18 */
padding-left: 18px;
}
/* 行内块元素之间默认是有缝隙的,加了浮动不会有缝隙 */
.search button {
float: left;
background-image: url(images/btn.png);
/* 注意:此处没有用search-input的宽度 */
width: 50px;
height: 42px;
/* 注意:按钮有默认边框,要去掉 */
border: 0px;
}