将菜单项展开到最大宽度引导程序

Question

我有一个顶级导航栏和html文件中的一些内容。问题是菜单项位于屏幕中间，就像这个简单的表示一样：

%%%% item 1 %% item 2 %% item 3 %% item 4 %% item 5 %%%%

其中％表示空格。当我将内容放在html中时，它不会在左侧或右侧与导航栏对齐。例如，文本在两侧都没有边框，但只是在视觉上。问题是菜单项是一些单元格，里面的文本居中，所以它在左侧和右侧有一些空间，这就是为什么html中的文字似乎没有对齐的原因我和＃39 ; m使用容器。有没有办法扩展项目文本以填充单元格的最大长度或使单元格完全符合文本的大小，以解决问题？

请参阅图片以便更好地了解问题。

Answer 1

我认为你使用了boostrap（但我不是读者）。我希望能够正确理解你的问题。

如果你使用boostrap提出的预定义模板，你可能会用这样的东西代表你的导航栏：

<ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
</ul>

在锚标记上设置了默认参数，如果需要自己的参数，则需要覆盖这些参数。在您的情况下，您需要通过将其设置为0px来删除左右填充。

<ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a style="padding-left: 0px; padding-right: 0px" href="#">Page 1</a></li>
  <li><a style="padding-left: 0px; padding-right: 0px" href="#">Page 2</a></li>
  <li><a style="padding-left: 0px; padding-right: 0px" href="#">Page 3</a></li>
</ul>

您可以创建一个css类以获得更清晰的代码。

结果类似于this