有谁知道为什么将文本添加到元素中会更改父元素的宽度？

Question

在下面的示例中，我有div.center，其中有一个导航。

导航栏内没有文本：

Without Text inside nav

但是，当我在导航中添加文本时，会发生以下情况：

With Text inside nav

任何人都可以解释为什么会发生这种情况以及如何克服它吗？

Answer 1

向三个div之一添加文本会强制div相对于周围的div垂直对齐。一旦您的其他div中包含内容，问题就会自动解决。

您可以通过将vertical-align: bottom;添加到nav CSS中来解决此问题。

示例：http://jsfiddle.net/9075Luho/17/

但是，真正的问题出在您为此布局使用嵌入式块这一事实。对于这种情况，Flexbox可能是更好的方法。看来您正在为一门课程学习HMTL / CSS / JS，并且不确定到目前为止您所学的内容，但是对于实际的应用程序来说，使用flexbox进行此类布局更为常见。