此问题在此处已有答案:
Two inline-block elements, each 50% wide, do not fit side by side in a single row(9个答案)
四年前就关门了。
我试着检查Bootstrap 4中的“Buttons”示例。它们有一排好看的按钮,如下所示:
http://getbootstrap.com/docs/4.0/components/buttons/
但我不明白,纽扣之间的空隙是从哪里来的。
这不是边距,不是弹性框对齐,也不是透明边框。那么,它是如何工作的呢?实际上,我禁用了dev-tools中的所有样式,但那个空间并没有消失。
4条答案
按热度按时间f8rj6qna1#
如果你检查与火狐空间来自这里,请检查截图:
您可以通过添加自己的css规则(如合并或填充)来删除空格。
谢谢
dgiusagp2#
空间的到来是因为按钮默认是
inline
元素...这不是一个bug ...这只是浏览器中内联元素的对齐方式...所以从你的代码中删除所有的空间是一个解决方案,我不认为我会这样做,因为如果你在编码,你的代码应该看起来很好...对...
当您使用bootstrap4时,您可以使用bootstrap
d-flex
类另一个解决方案是,您可以将按钮父项的
font-size
设置为0
,然后将按钮的font-size
设置为默认值堆栈代码段
第一次
5q4ezhmt3#
你可以使用简单的父元素
flex
来解决它px9o7tmv4#
之所以有空格,是因为HTML元素之间有空白。如果删除空白,按钮将彼此相邻放置。
请注意,浏览器会将元素之间的空白(新行)压缩为单一空格。
现在,如果我们删除空白: