Question

我希望导航菜单包含3个带有链接的项目，这些链接的文本长度非常不同，例如：

主页|很长的标题|是

我希望菜单的宽度为100％，但我希望菜单项的基于文本长度。（您可以使用table / tr / td标记轻松完成此操作）。

我不想导航对齐（每个项目宽度的33％） - ＆gt;我希望第二项更广泛，因为它里面有更多内容..

<ul class="nav main-categories nav-justified">
    <li>
      <a href="#">title</a>
    </li>
    <li>
      <a href="#">Veerryyyy looong title :)</a> // This should be more than 33%
    </li>
    <li>
      <a href="#">title</a>
    </li>
</ul>

有办法做到这一点吗？（我希望它能自动工作）

Answer 1

只需将项目的宽度设置为自动，它将根据其中的文本自动设置

<style>
    .nav li a{
    width: auto;
    }
    </style>

使用动态宽度的导航项导航

1 个答案: