同行的input和button之间水平对齐和缝隙问题

最新推荐文章于 2024-01-05 14:15:42 发布
最新推荐文章于 2024-01-05 14:15:42 发布
阅读量604 收藏 3
点赞数 2
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/origin4316/article/details/117435262
版权

缝隙问题

在这里插入图片描述

缝隙问题直接在父元素的css属性上加上 font-size: 0

代码在自动格式化时,往往会自动设置一些缩进、换行，而但当元素的display为inline或者inline-block的时候，这些缩进、换行就会产生空白，导致前端页面展示变形。
在这里插入图片描述

水平对齐问题

项目中input和button对不齐，是因为input和button都是vertical-align: baseline 而二者基于的基线位置不同。
但是，我的demo中并未出现此问题。在input和butten上同时设置css属性vertical-align:top解决

在这里插入图片描述

originks
关注
专栏目录
设置输入框和按钮对齐
polary_的博客
05-21 3935
写一个简单的搜索页面，想达到如下图的结果 <div class="search"> <input type="text" placeholder="请输入查询的天气" autocomplete="off" autofocus="off"> <button>搜索</button> </div> 1.首先input和button是行内块元素，两者之间会有缝隙，给两者设置float就可以贴合在一起 input,button {
如何消除button和input之间的间距
weixin_46452134的博客
12-07 2563
今天在写搜索的时候，发现button标签和input标签之间会存在一个间距。原因是input是内联块状元素(inline-block)；内联元素是当做字体来处理的，字体之间是存在间隔的，所以内联元素之间也会有间隔。但是大多数网站搜索框都会消除它们中间的间距。具体的做法有三种： 1.在父级元素上设置font-size: 0; 让我们先来看一下原来的样子叭~ 在input标签的父级元素上设置font-size: 0;之后 **注意：**如果使用这种方法，记得重新设置内联元素(input)的字体大小噢！ 2
input和button等高间隙水平对齐问题
MOEIAW的博客
06-22 350
二者间的间隙问题： input和button标签之间存在换行，产生的空白字符导致间隙 解决办法： 在同一代码行内写 设置相同高度 不能等高： button的高度包含边框的高度，而文本框text则不包含边框高度。 解决办法： 给input加上属性box-sizing: border-box; 水平不对齐： input 标签跟button布局不在一个水平线上 解决办法： 在button加上属性vertical-align: middle; 可以给button加上margin-left: -2px;优化间隙
input总是和button不能对齐
xiaoxiede_wo的博客
06-08 2906
之前写搜索框时没注意这个问题，按正常而定写法input框和button边框总是不能对齐，可以在控制台通过实验button的marign-top来调节，但是还是不太好的 这里的总会出现错位； 解决1： 在input和button外层都加一层span，使两个span对齐，处理input边框就行了， 代码： html： <div class="search"> ...
关于input框和button的对齐
qq_42166078的博客
11-15 8653
像上面的事例，之前看了许多input的button的对齐的方法，感觉都太复杂，各种定位浮动，代码有点儿冗余，这里我介绍一种比较简单的对齐方法。 html内容： css内容： 主要就是font-size=0和vertical-align的使用，其他的css代码我都是设置了一些样式，仅供参考，如有不足之处，还请各位大佬指出。...
input type为text和button的不对齐问题 以及 之间的小空格
热门推荐
MrZZhou的博客
05-25 1万+
今天实验室学弟问我 “怎么这个输入、搜索按钮怎么都对不齐啊” 就像这样子： 咦 怎么会 我看看 代码没毛病啊 同样的height、同样的line-height，各有一个width（复习一下，input属于inline-block元素） 倒腾了好久 感觉甚是诡异 现在回想 怎么没有赶紧百度下 踩过这个坑的前辈们也是不少啊  首先要说明的是这个现象只会出现在Chrome中 没想到这次会是C
input输入框与按钮存在间隙，且不能上下对齐问题
qq_43670193的博客
11-10 2283
博主因为太久没写页面了（之前一直在看JS啥的），四处碰壁之后决定先务实基础，在此记录自己在务实基础的路上所遇到的坑！！！ 在我们仿写页面时，经常碰到input标签和button标签并列，如百度首页的搜索框就是一个典型的例子： 然而，当我自己写出的效果： <div id="middle"> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""> &
input与button输入框 间隙问题
realDE的博客
07-03 9107
发现问题 解决问题 水平缝隙 垂直缝隙发现问题在开发中经常会遇到搜索框组，即一个input输入框和一个button点击搜索框，由于浏览器的解析原因，我想知道但是我没有找到答案，会出现即使是同样的高度，视觉上input组并没有在一条水平线上，以及会出现水平距离上的缝隙。 解决问题水平缝隙 水平缝隙问题其实是因为标签之间的换行，产生了空白符，这些空白符某种意义上也算是字符，所以理所当然的占据了一定
input & button对不齐、有间隙、高度不一致等问题解决方法
濮家大少
10-24 9103
1.input和button对不齐的原因 对不齐是因为行内元素的基线是不同的，所以会导致高低不同。 解决办法：每一个元素都加上下面即可； vertical-align:middle; 如下 .content{ width:200px; height:30px; vertical-align:middle; } .btn{ width:80px; heigh...
input和button放在同一行出现的问题
christmassss的博客
01-05 1282
input button 同在一行 水平对齐、缝隙问题整理
input和button对不齐，错位问题
cwb_2120的博客
07-11 502
只需要在button上面加上一个 vertical-align: top; 这个属性就可以对齐了
input和button之间的缝隙问题与高度对齐问题
weixin_43465508的博客
03-16 673
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。button里有box-size：border-box,
前端 —— button和input不对齐的解决方法
weixin_44448873的博客
12-18 899
在CSS中添加 vertical-align:middle; 示例源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .in...
input button 同在一行 水平对齐、缝隙问题整理
BigOrange的博客
12-19 8226
问题1： input和button中间有缝隙 &amp;lt;style&amp;gt; .search_input_bar .search_input{ border: 1px solid #DBDBDB; border-radius: 2px 0 0 2px; height: 30px; width: 220px; line-height: 30px; pad...
Input标签与图片按钮水平对齐解决方法
weixin_30408739的博客
11-13 150
昨日，小编的朋友就来咨询，说他也遇到了这个问题，并且使用margin、padding等Css语法，都没有解决。 　　解决方法其实很简单，我们只要加上vertical-align:middle属性就可以了。 　　来看实例： 提示：您可以先修改部分代码再运行 页面直接摆放一个input文本框与ImageButton图片按钮，但是发现没有对齐： 复制代码 代码如下: ...
Android学习 （八） 把button设置成圆角出现的问题及解决
myGFZ的博客
11-13 3204
在给按钮做一个圆角的时候，总是出现了很多问题，一度想要放弃，但我不服，还是做出来了。首先，要在drawable下面新建一个xml文件。 注意：这里不能直接在values下面新建按钮的属性文件，因为这样你在android:background = "..."的时候，你是找不到文件的。所以，要把这个文件定义在drawable下面，这个过程还是有些bug 我直接截图好了：如图，就会出现新建的在draw
input标签跟button 不在一个水平上的解决方法
lavoz的博客
02-22 1495
主要是记录一下遇到的问题 input 标签跟button 布局不在一个水平线上, 在标签样式中都加上 vertical-align: middle;
按钮与输入框水平对齐
zh921112的专栏
09-05 2078
给按钮css设置：vertical-align 属性
arkts中input和button怎么对齐
最新发布
10-22
在ARKTS（一种基于React的游戏引擎）中，如果你想让`<Input>`和`<Button>`元素在布局上对齐，你可以利用CSS或Flexbox来实现。这里提供一个基本的例子： ```jsx import React from 'react'; import { View, Input, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值