如何拉伸导航，以便接管整个div

Question

我有一个带有以下属性的导航div：

#nav {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

但是当我在其中放入一个导航栏时... 960px

的整个宽度没有拉伸

link：here

Answer 1

将此规则添加到样式表中：

.sf-menu { width: 100%; }

这将使您的ul代码占据#nav div的全部宽度。我不确定这是否正是您正在寻找的，或者您是否希望每个li占据整个宽度。

如果您希望每个li元素在整个宽度上均匀拉伸，在您使用4个元素的情况下，您可以简单地将它们的宽度设置为25％。对于可变数量的li标签，我不得不再考虑一下......

.sf-menu li { width: 25%; }

Answer 2

将这些规则添加到样式表中：

#nav > ul {width: 100%;}
#nav > ul > li {width: 25%;}