以下是我的网站:http://www.reshapefinancial.com/,当我应用左边框时,它会在右侧网站上创建一个空格。当您检查并删除左边框border-left: 1px solid white
时,您会看到右边的空格消失。
答案 0 :(得分:1)
之所以存在差距,是因为li
被设置为display: inline-block
。这意味着浏览器将它们视为单词,并且当它们之间存在空格时,浏览器将对其进行渲染。在您的情况下,空间来自换行符和用于在HTML中缩进的空格。
直接解决此问题的一种解决方案是添加:
#top-menu{
...
font-size: 0;
}
这实际上使浏览器放置的空间没有字体大小消失了。不完美,但它直接解决了问题。正如@ Kudla69在他的回答中指出的那样,这会破坏font-size
继承,这也可能导致问题,这就是使这个特定黑客不是推荐路线的原因。
直接解决此问题的另一种方法是删除HTML中的空格。重构HTML以使其更像是。
<li> This is something
</li><li> This is something else
</li>
这将删除元素之间的空间,浏览器将基本上将它们视为没有空格的单词,并将它们相互对接。
最后,如果你对它很好,你也可以float: left
li
个元素。但是,在某些情况下,这可能会导致尺寸问题。这会将它们从流程中删除,因此浏览器不再像对待单词一样对待它们。
或者正如其他人所说的那样使用display: flex
,有时可能会比inline-block
略有不同,但这是一种更现代的方法。
答案 1 :(得分:1)
@Dons的回答很好地解释了潜在的问题。这是一个替代解决方案,使ul成为flexbox。这种方法更好用,因为你不必将字体大小设置为0,这会弄乱任何字体大小的继承。
#top-menu.nav {
display: flex;
}
答案 2 :(得分:0)
请查看以下网址以获取白色间距的解决方案
display: inline-block leaves gap with respect to height after div element 这是你的解决方案
在li
添加func animateToProfile(using transitionContext: UIViewControllerContextTransitioning) {
guard let fromVC = transitionContext.viewController(forKey: .from)?.childViewControllers.first,
let toVC = transitionContext.viewController(forKey: .to)?.childViewControllers.first as? ProfileViewController,
let superviewToAdd = toVC.parent?.view else { return }
print("\(toVC.view.frame)")
let sideMenuOriginX = UIScreen.main.bounds.width * (98 / 414)
toVC.sideMenuView.frame.origin.x = toVC.view.frame.width
toVC.visualEffectView.alpha = 0
transitionContext.containerView.addSubview(superviewToAdd)
let duration = transitionDuration(using: transitionContext)
UIView.animate(withDuration: duration, delay: 0, options: [.curveEaseInOut], animations: {
toVC.sideMenuView.frame.origin.x = sideMenuOriginX
toVC.visualEffectView.alpha = 1
}, completion: { _ in
transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
})
}
float:left
答案 3 :(得分:0)
在对OP的评论中,@ Marvin指出了问题的根本原因(并链接到主题where it's already answered):这是因为内联块项目之间的空格字符。内联块元素属于内联格式化上下文,就像例如文本的单词和它们之间的任何空格字符在文本中充当空白字符,即作为字间间隔。这不是一个错误。这就是display:inline-block
应该按标准工作的方式。
设置边框不会导致那个间距,只是让它可见。
有tons of ways可以解决这个问题。仅举几例:
margin-left
。缺点:您需要知道确切的宽度
一个空白字符,它取决于字体设置等。word-spacing
或letter-spacing
(甚至两者,如旧YUI解决方案中所示)。缺点:与上述相同+浏览器对负差距的处理方式不同,有些允许项目重叠,有些则不允许。<!-- -->
)注释掉这些标记之间的空格。缺点:与上述相同,这些评论的冗余DOM节点。font-size: 0;
表示容器。缺点:你不能再以em
为单位设置项目的字体大小,在旧的Android浏览器中有效。</li>
结束标记。它在HTML5中有效(并且在HTML中始终有效,但在XHTML中无效),这样做会使浏览器在下一个<li>
开始标记之前隐式关闭它们,在它们之间不留空格。缺点:仅适用于有限的一组标签,并不总是易于阅读,可能会导致代码编辑器出现问题(例如语法高亮显示)。display:table
,对项目使用display:table-cell
而不是内联块。缺点:不能换行到新行,项目不能有不同的高度,需要不同的样式方法(例如border-spacing
而不是margin
来控制间距(如果需要)。此列表未完成。这些方法都不是完美的,因为它们中的大多数基本都是黑客。
然而,我深信任何问题的最佳解决方案是使用不会导致该问题的适当工具。在这种情况下,有这样的工具:Flexbox。它具有与内联块(以及更多!)相同的对齐功能,它不需要“clearfixing”,它可以在必要时换行到新行,并且它当前是supported in almost all browsers。并且默认情况下它不会在项目之间留下任何空格。
实际上,您只需将display:flex
添加到容器中,而在现代浏览器中,不需要的空间会自动消失。而且您现有的内联块解决方案仍然适用于非常老的浏览器,提供了不错的回退。