如何解决搜索模块中遇到的input输入框和button确定按钮之间的默认间距问题

解决input与button间距问题的三种方法

最新推荐文章于 2024-05-25 08:00:00 发布

原创最新推荐文章于 2024-05-25 08:00:00 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文分享了在页面编辑中如何通过浮动、字体大小调整和去除空格来消除input输入框与button按钮间的默认间距，确保UI一致性。

如何解决搜索模块中遇到的input输入框和button确定按钮之间的默认间距问题

在编辑页面的时候，我遇到了这样一个情况，如下图，input和button标签之间有一个默认的缝隙

在这里插入图片描述
经过一番尝试，终于找到了集中解决方案，

方案一：

对input和button加上一个左浮动，float: left;

方案二：

在外面包裹的父盒子上，使用font-size: 0px;

方案三：

在编辑器中，input和button标签之间不要存在空格，如图所示
在这里插入图片描述
最终效果，如图，缝隙问题完美解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

tb912

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

HarmonyNext当自定义Dialog有TextInput输入框组件时，弹出软键盘时，dialog布局与软键盘之间有16vp间隙，如何解决,正宗方案

闫瑞锋的博客

02-08

774

),})

缩放浏览器时搜素框子盒子和父盒子之间的缝隙白线问题

mystoryx的博客

03-13

1164

搜索框的属性设置和对应缩放效果

参与评论您还未登录，请先登录后发表或查看评论

两个input之间有空隙，处理方法

rainbow_hongmei的博客

03-25

5396

两个input之间有空隙: 1、改变html结构，让俩input不分开，写在一行；代码如下： <input id="day" type="button" value="日" name="time1" class="checked"/><input id="month" type="button" value=&quo

关于input输入框与按钮之间的间距问题？

哆来A梦没有口袋的博客

10-09

8823

造成的原因？ input输入框与按钮button都是内联样式，在浏览器进行解析的时候，解析成像字体一样的样式，字体之间有间距，从而输入框与按钮之间有间距，如图清除间隔 1.给button设置对应大小的margin-left;, 2.利用定位position left top进行调整 3.给父元素设置font-size:0 4.利用浮...

＜el-input＞标签和＜el-button＞标签宽度不一致（ElementUI样式未使用）

m0_57545353的博客

04-28

1546

<el-input>标签和<el-button>标签宽度不一致（ElementUI样式未使用）标签宽度未自适应

搜索框和按钮缩放时会有缝隙的bug

从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！

06-30

985

做一个类似于百度的搜索框时，浏览器 100% 没什么问题，但是缩放到175% 时按钮和input会出现缝隙。 100%效果图 175%效果图如上图：明显能看出有空白的缝隙产生这个的原因是：当缩放到175%时，应该1.75格代表1像素，但由于硬件层次限制，比如一格用四个物理像素点绘制，0.25格就不绘制，故1.75格中的0.75，只能用三格绘制，未绘制的一格产生了空隙（css 页面缩放边框产生空隙相关）如果是按钮和 input 之间有缝隙可以参考：input输入框和bu

css中使input输入框与img(图片)在同一行居中对齐

09-25

在处理input和img元素时，由于浏览器默认的样式差异，可能会遇到img元素位置高于input输入框的情况。本文将探讨如何有效地解决这个问题，实现两个元素在同一行的居中对齐。首先，我们要理解CSS中的`vertical-align...

用javascript实现文本框和"选择"按扭之间的间距

10-30

2. **计算间距**：接着，通过JavaScript来计算当前文本框和按钮之间的间距。 3. **调整间距**：最后，根据需要调整这两个元素之间的间距。 #### 四、具体实现方法 ##### 4.1 获取元素在JavaScript中，可以通过`...

input输入框和div之间有间隔

最新发布

12-09

根据用户的问题，用户想要解决input输入框和div之间存在间隔的问题。参考提供的引用内容，特别是引用[1]和引用[2]，我们可以知道这种间隙通常是由于HTML标签之间的换行符或空格引起的。在HTML中，内联元素（如input...

input输入框中怎么放一个按钮

07-11

在这个示例中，我们使用了flex布局来将输入框和按钮水平排列在一起。输入框使用了flex属性来占据剩余的空间，并且通过margin-right属性与按钮之间留有一些间距。您可以根据需要自定义样式和布局。使用这种方法，您...

安卓按钮内边距(边框紧贴文字)方法

xiaoerbuyu1233的博客

12-07

3074

android:minWidth="0dp" android:minHeight="0dp"

android的按钮布局,Android布局 - 设置图像按钮之间的间距

weixin_29009339的博客

05-26

2073

我有一个酒吧顶部的四个按钮(背景图像)。我想要做的是增加按钮之间的间距(以便它们跨越横条展开)并将重力设置为center_horozontal。我在ImageButtons(okcancelbar_button_home)上尝试了paddingLeft和paddingRight，但它似乎没有做任何事情。我想也许图像按钮的父母是关键，但我不知道该在那里设置。这是我的布局：Android布局 - 设置...

控件的间距为0

hello_kevinkuang的专栏

08-14

1302

要用android:layout_marginLeft等参数调整，而且LinearLayout和RelativeLayout都可以的，不过需要注意的是：外边框：android:layout_marginLeft等参数的默认数值为0dp，但相邻两个控件之间会自动添加8dp，如果想一个挨一个的话，android:layout_marginLeft="-8dp"。内边框：android:paddin

Vue el-button根据条件显示与隐藏

热门推荐

qq_42403906的博客

10-12

1万+

'none':'' }" 控制按钮是否隐藏。'冻结' : '解除冻结' }} 控制按钮显示的样式。需求是按照delete的值来判断为冻结或者解除冻结，但是有个情况是deleted=1时不显示这个按钮。

关于button会有莫名奇妙的边距

qq_41973024的博客

05-17

1186

<button class="contentbtn">elmentui</button> <button class="contentbtn">Vue</button> <button class="contentbtn">bootstrap</button> <button class="contentbtn">react</button> ...

el-button的左边距设置为零

weixin_58689699的博客

01-08

879

/deep/.el-button + .el-button,.el-checkbox.is-bordered + .el-checkbox.is-bordered { margin-left: 0px;}

详细分析Vue按钮间距的优化方式（附Demo）

码农研究僧的博客

05-25

1322

以调整间距以及垂直间距为Demo为主

修改查询栏el-from表单标题字体、输入框(控件)之间的间距

树上骑个猴的博客

12-30

5324

<el-card class="box"> <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="70px" class="remove-font-weight"> <el-form-item label="用户名称" prop="userName"> <el-input v...

wex5去除同一行两个相邻button的空隙问题

蒹葭苍苍

02-06

910

产生原因和解决方案:因为div是块级元素，由于div标签之间有空格和换行，而这些不可见的字符会导致块级元素出现间隙，因为他们是有浏览器的默认字体大小的，清除块级元素间隙的方法是，设置其字体大小为0，我们可以加上以下样式解决： div { font-size: 0px; } 设置完成后button之间的空隙即可消除。