在Chrome中最后对齐的内联块元素中添加了额外的空间
隐藏的爱好
我遇到了一个似乎仅在Chrome中出现的小问题（经过IE10和FF 31的测试并确定）。
在提供的示例中，将#message和#link都设置为，display: inline-block;以便它们可以彼此垂直垂直对齐（中的文本#message长度可能会大大不同）。
text-align: justify;已设置#container为确保#message与左侧和#link右侧对齐。
问题是，在某些窗口大小下，的右侧会出现一个小的“空格” #link。
问题：
它应该是什么样的： 
我实际上试图实现的目标： 
If you view the fiddle and can't see the problem try re-sizing the window.
- What is causing this issue in Chrome?
- Is there any way to fix this without resorting to using floats (I would like to keep vertical alignment)?
JS Fiddle:
HTML:
<div id="container">
<div id="message">Lorem 1. Ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum gravida tincidunt.</div>
<a id="link" href="#">OK</a>
<div id="info">Lorem 2. Ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum gravida tincidunt.</div>
</div>
CSS:
#container {
background-color: red;
bottom: 0;
left: 0;
margin: 10px 5%;
position: fixed;
text-align: justify;
width: 90%;
}
#message {
color: #FFFFFF;
display: inline-block;
max-width: 80%;
vertical-align: middle;
}
#link {
background-color: #FFFFFF;
color: #000000;
display: inline-block;
padding: 1em;
}
#info {
background-color: green;
color: #FFFFFF;
display: inline-block;
margin: 0;
width: 100%;
}
Isaac
This case is a perfect candidate for using the flexbox layout. You can keep your existing code as is but add the following lines. This will keep your original code as a fallback for browsers which don't support flexbox. Since Chrome does support the current flexbox syntax all the way back to version 21, this should safely eliminate your problem.
Modified CSS
#container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
#message {
flex: 1;
}
您需要为代码提供前缀以提供全面的浏览器支持，但是由于您仅担心Chrome中的错误，因此这并不是绝对必要的（无前缀支持可以追溯到版本29，尽管版本27仍占全球的.54％市场份额，因此您可以放心-webkit-）。
由于刚开始使用flexbox可能会有些混乱，因此如果您在使用CSS之前没有使用过flexbox，那么CSS-Tricks上的示例将对它进行很好的概述。我没有足够的声誉点来发布两个以上的链接，而只是Google“ css技巧flexbox”。
希望这可以帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Chrome在段落中添加了领先的空间
- 2
Wordpress简码中的链接在末尾添加了额外的空间
- 3
浏览器在缩进的HTML中添加了额外的空间
- 4
内联元素的垂直对齐并消除内联块元素之间的空间
- 5
li元素中的空div在Chrome中添加了不需要的空间
- 6
内联块中的额外高度
- 7
内联块添加底部空间
- 8
在 React 中删除内联块元素之间的空间
- 9
元素堆叠而不是与内联块对齐
- 10
为什么内联块元素未对齐？
- 11
显示：内联块元素未正确对齐
- 12
如何显示在其CSS属性中添加了“固定”和“内联块”的DIV
- 13
如何显示在其CSS属性中添加了“固定”和“内联块”的DIV
- 14
用CSS计算内联块元素的空间
- 15
Django模板扩展标签在顶部添加了额外的空间
- 16
不需要时添加了额外的垂直空间
- 17
内联块容器中的垂直对齐
- 18
为什么这些内联块元素会产生额外的宽度？
- 19
将表格单元中的两个内联块元素对齐到相对侧
- 20
内联块与文本对齐
- 21
垂直对齐两个内联块元素
- 22
显示内联块元素不会垂直对齐
- 23
CSS对齐表单输入和内联块元素
- 24
显示内联块元素不会垂直对齐
- 25
内联块周围的空间
- 26
Windows cmd echo / pipe最后增加了额外的空间-如何修剪它？
- 27
内联块（包含图像）在Firefox中占用额外的宽度
- 28
Intellij在新块中添加额外的行
- 29
内联输入按钮的作用类似于 Chrome 中的块元素，但不是 Firefox
我来说两句