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

Question

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

导航中没有文本：

导航中没有文本

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

导航内有文字

谁能解释为什么会这样以及如何克服呢？

Answer 1

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

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

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

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