苏州出名的网站公司,地方性的网站有前途,WordPress说说主题,系统开发商前端小知识点——按钮之间出现很小的空隙如何规避 文章介绍问题再现总结 文章介绍 本文主要介绍页面中两个按钮相邻时会出现一点空隙#xff0c;导致在后续自定义填充的时候出现换行或其它问题#xff0c;特此记录。
问题再现 这个图片能看到我们给外面的div设置的是300的宽… 前端小知识点——按钮之间出现很小的空隙如何规避 文章介绍问题再现总结 文章介绍 本文主要介绍页面中两个按钮相邻时会出现一点空隙导致在后续自定义填充的时候出现换行或其它问题特此记录。
问题再现 这个图片能看到我们给外面的div设置的是300的宽度按钮设置的150的宽度正常情况下应该是一行的但是按钮却换行了也没有什么margin和padding操作这是为什么 其实这个问题是一个常见的问题只要是行内元素都会存在两个元素中间有几px的空隙而这几px实际上是我们在写代码的时候习惯换行HTML会将这个换行也识别为一个元素导致多了一点空隙如果你将两个button按钮不换行就没有这个问题了。但是因为我们肯定会有一些margin和padding操作所以解决不了实际问题必须使用css解决。 在之前的版本中一般使用浮动解决但是这种方法已经过时了而且不好维度常常在加一个按钮或者去掉一个按钮的时候需要修改样式所以目前最好的解决方式是flex布局兼容性很高只要不是IE10以下基本各个浏览器都可以兼容。 这里为了更好的兼容在外部div使用flex布局的时候多写几行如下。 display: flex;display: -webkit-flex;display: -moz-flex;display: -ms-flex;养成一个好习惯这种css针对各个浏览器都写一下代码的健壮性更好。
总结 项目中遇到了这么一个问题记录一下无论是普通按钮还是组件的按钮都可能存在这种问题切记现在的flex布局是重点浮动已经渐渐淘汰了。
