526互联

css-输入框和按钮水平对齐

发布时间 2023-03-25 13:16:59作者: Yancy00

image

<style>
	.container {
		margin: 0 auto;
		margin-top: 160px;
		width: 600px;
	}

	.search {
		width: 100%;
		margin-top: 20px;
		height: 40px;
	}

	.search input {
		width: 85%;
		height: 100%;
		font-size: 18px;
		padding-left: 10px;
		float: left; //都左浮动.间隙就没了
		box-sizing: border-box;   //这里
	}
	.search button {
		width: 15%;
		height: 100%;
		float: left;   //都左浮动
		border: none;
		vertical-align: bottom;  //这里
		background-color: steelblue;
	}
</style>

<div  class="container">
    <div class="search">
        <input type="text" v-model="city">
        <button>查询</button>
        <div class="clear"></div>
    </div>
</div>