首页 > 其他分享 >css-输入框和按钮水平对齐

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

时间:2023-03-25 13:23:28浏览次数:33  
标签:search width 100% height 输入框 对齐 margin css left

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>

标签:search,width,100%,height,输入框,对齐,margin,css,left
From: https://www.cnblogs.com/unity-yancy/p/17254556.html

相关文章

  • 若依框架----图标(可能不全)css
    把若依框架按钮的图标大概找出来了.el-icon-ice-cream-round:before{content:"\E6A0";}.el-icon-ice-cream-square:before{content:"\E6A3";}.el-icon-lollipop:......
  • Android 自定义View 之 Mac地址输入框
    Mac地址输入框前言正文一、什么是View?二、什么是自定义View三、自定义View①构造方法②XML样式③测量④绘制1.绘制方框2.绘制文字⑤输入1.键盘布局2.键盘接口3.......
  • CSS鼠标样式(cursor)总结(转载)
    CSS鼠标样式(cursor)总结 属性值示意图描述auto 默认值,由浏览器根据当前上下文确定要显示的光标样式default默认光标,不考虑上下文,通常是一个箭头none......
  • CSS选择器(包含CSS3新增的伪类和属性选择器等)
    选择器详见https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/SelectorsCSS语法规则由两个主要的部分构成:选择器,以及一条或多条声明(样式)全局选择器......
  • vue中css变量的使用
    1、在css中使用变量(1)css中声明变量--color:red(2)使用变量color:var(--color)//color:red获取到全局声明变量值为red2、使用vue中的变量(1)在html标签中<span:style="{......
  • JAVAWEB-北京地铁查询系统(Servlet+JSP+CSS+SQL 实现)部分代码
    #这是我与伙伴合作完成的练习项目@小彭先森页面展示请见我的上一篇博客:https://www.cnblogs.com/rsy-bxf150/p/17253623.html完整代码请看我的GitHub:https://github.co......
  • JAVAWEB-北京地铁查询系统(Servlet+JSP+CSS+SQL 实现)
    Servlet+JSP+CSS+SQL实现完善的地铁系统页面#这是我和伙伴合作完成的练习项目#代码我将放在下一篇博客功能介绍:1.地铁线路查询:选择线路,输出线路上的站点名。2.地铁站......
  • CSS08.盒模型
    盒模型1.什么是标签的显示模式什么是标签的显示模式?标签以什么方式进行显示,比如div自己独占一行,比如span一行可以放多个作用:我们网页的标签非常多,在不同地方......
  • CSS10.行盒盒模型
    行盒的盒模型常见的行盒:包含具体内容的元素span、strong、em、i、img、video、audio显著特点盒子沿着内容沿伸 行盒不能设置宽高调整行盒的宽高,应该使用字......
  • CSS09.盒模型应用
    盒模型应用改变宽高范围默认情况下,width和height设置的是内容盒宽高。页面重构师:将psd文件(设计稿)制作为静态页面 问题:衡量设计稿尺寸的时候,往往使用的是边框盒,......