如何让HTML标签元素紧挨着(消除元素或标签直接的空白间距)

本文探讨了在CSS3中实现按钮紧密排列的方法。通过调整HTML结构,将按钮标签置于同一行内,解决了按钮间莫名出现空白的问题。适用于前端开发者。

有一个CSS3 按钮样式表,提供一种让三个按钮紧挨着的样式,分别为“.left”、“.middle”、“.right”,结果无论怎么试,三个按钮中间始终留有一段空白,经检查:没有额外的margin和padding参数值。

后来发现一个解决的办法:三个元素标签必须写在同一行HTML语句中,至少“<a>”后面必须紧挨着"</a>",很奇怪!这一点跟之前使用<textarea>标签碰到的问题有点相似,即

开始标签跟末尾标签要在同一行,否则每次保存表单,都会莫名其妙地多出很多空格一样!

例如:

显示正常的代码的格式

<textarea>${user.name }</textarea>

每次保存都会莫名其妙多出好多空格的格式

<textarea> ${user.name } </textarea>

备注:浏览器为火狐8.0,文件是JSP !


要让这四个按钮紧挨着,间距变短,可以通过减少 `<el-col>` 之间的 `gutter` 值,并通过 CSS 移除减小按钮之间的外边距(`margin`)来实现。 ### 修改后的代码 #### 1. 调整 `<el-row>` 的 `:gutter` 属性 将 `:gutter="10"` 改为较小的值,比如 `:gutter="5"` 直接移除以完全取消列间的默认间距。 #### 2. 使用 CSS 类统一设置按钮之间无间距 添加一个类 `.no-margin-button` 来去除左右外边距。 ```vue <el-row type="flex" justify="start" :gutter="5"> <el-col :span="6"> <el-button @click="openSingleInput" type="success" icon="el-icon-edit" class="uniform-button no-margin-button" >单行录</el-button> </el-col> <el-col :span="6"> <el-form-item label-width="0"> <pasted-button @paste="handlePaste" class="uniform-button no-margin-button"></pasted-button> </el-form-item> </el-col> <el-col :span="6"> <el-button @click="clearPending" type="warning" icon="el-icon-delete" class="uniform-button no-margin-button" >清空</el-button> </el-col> <el-col :span="6"> <el-button @click="submitPendingData" type="primary" icon="el-icon-upload2" class="uniform-button no-margin-button" >提交</el-button> </el-col> </el-row> ``` ### 添加 CSS 样式(在 `<style>` 中) ```css .uniform-button { width: 100%; height: 40px; padding: 0 12px; } .no-margin-button { margin-left: 0 !important; margin-right: 0 !important; } ``` > 注意:将每个按钮的 `<el-col>` 列宽从 `3` 改为 `6`,是为了适应总宽度 `24` 的布局规则。如果列数太小会导致内容溢出。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值