display: table-cell clever usage; use display: table-cell production search box

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/hua_ban_yu/article/details/82867714

Use displayed on the same line, previously used a float, position the layout, you can use flex layout in high version of the browser together two or more labels. Use stumbled display: table-cell adaptive layout is a good use of the following is to use a display: table-cell production adaptive search box (in any case the content of the search button, the corresponding input boxes has been input display 100%).

 

Production steps

1. Create a new three labels

<div class="search-box">
			<span class="search-btn">搜索</span>
			<input type="text" class="search-cont"/>
		</div>

 

2. Add to the search-box display: table, set the class search-cont, search-btn are added display: table-cell attributes, and to search-btn set width: 1%; white-space: nowrap ;, simultaneously search -cont width 100%. (Note: In order to display the same on the other is to add style)

.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. Save you can see the effect.