Question

我想我只是愚蠢，但我真的很困惑为什么我的代码中的SVG图像没有浮动到左/右 - 好像它们有一些内置的填充。

有人可以帮我解决这个问题并解释为什么会这样吗？

我在这里上传了一些代码：https://jsfiddle.net/a328gf3y/7/

header #branding{
    float:left;
}

header nav{
    float: right;
}

由于

Answer 1

好的，这里发生了两件事，一件与SVG相关，另一件与浮动和文本对齐有关。

看起来您希望品牌与页面左侧齐平。这被推开的原因有点与（如你所说）内置填充有关。 SVG有一个名为viewBox的属性，它定义了它的宽高比以及如何缩放它。

品牌SVG的视窗框值为viewBox="0 0 362.3 66.91"，但在HTML中，您将宽度和高度设置为height="57px" width="476px"，这些尺寸的宽高比不匹配 - 因此浏览器确实如此最合适并在SVG元素内添加填充。一个简单的解决方案是将HTML中的宽度和高度设置为height="67px" width="363px"。

所以事情1，事情2是关于花车。

看起来您希望导航元素与右侧对齐，因此您需要在float: right元素中设置nav。浏览器尽职尽责地将nav元素浮动到右侧，但是里面的元素仍然具有左侧的默认文本对齐方式。对此的快速解决方案是将text-align: right设置为header nav

我已对您的fiddle here做了一些更改，我希望有帮助

如果你想深入研究SVG viewBox和坐标系统 - Sara Soueidan有一个great post about it✌

SVG图片在HTML代码中没有浮动到左边？

1 个答案: