两个或者两个以上标签一起使用显示在同一行时,以前常用的是float、position进行布局,在高版本的浏览器可以使用flex进行布局。无意中发现使用display:table-cell也是一个很好用的自适应布局,下面的是一个使用display:table-cell制作自适应搜索框(无论如何修改搜索按钮的内容,对应的input输入框一直都是100%显示)。
制作步骤
1.新建三个标签
<div class="search-box">
<span class="search-btn">搜索</span>
<input type="text" class="search-cont"/>
</div>
2.给search-box添加display: table,设置类search-cont、search-btn都添加display: table-cell的属性,然后给search-btn设置width:1%;white-space: nowrap;,同时search-cont的宽100%。(注意:为了显示效果,同是添加上了其他的样式)
.search-box{
display: table;
}
.search-cont{
width: 100%;
display: table-cell;
border: 1px solid #ccc;
padding: 8px 0px;
}
.search-btn{
display: table-cell;
width: 1%;
white-space: nowrap;
padding: 6px 12px;
background-color: #ccc;
border: 1px solid #ccc;
border-radius: 4px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
font-size: 14px;
color: #555;
border-right: 0;
}
3.保存后即可看到效果。