display:table-cell巧妙用法;使用display:table-cell制作搜索框

两个或者两个以上标签一起使用显示在同一行时，以前常用的是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.保存后即可看到效果。