0

我在设计导航菜单时遇到了一些麻烦，您可以在其中选择包。

这将是一个移动网站的导航菜单。

活动的绿色 li 选项卡我需要均匀分布在整个 ul 中

我的问题是，当我单击选项卡使其处于活动状态时，绿色并没有填满所有的 li，蓝色仍然可见。

其次，在绿色活动选项卡 li 上，我需要在活动选项卡的底部中心显示一个向下箭头。

我已经或多或少地完成了一个小提琴，只需要帮助设计它来完成它。

http://jsfiddle.net/8C3U3/

<ul id="navlist">
   <li><a href='#' class="m-active">Basic</a></li>
   <li class="spacer"><a  class="m-active"href='#'>Standard</a></li>
   <li><a  class="m-active"href='#'>Premium</a></li>
</ul>
4

1 回答 1

1

一、为什么还是显示蓝色？

蓝色仍然显示有几个原因。我将逐一介绍。

  1. 第一个原因是你给了你li的 s 填充和蓝色背景颜色。然而，您将绿色背景颜色分配给您a的 s。由于a包含在 中li，并且li有填充，所以a不可能扩展 the 的整个尺寸li并掩盖蓝色。查看此 JSFiddle，该问题已得到纠正。

  2. 第二个原因是您li的 s 设置为内联元素。内联元素将代码中的所有空格（空格、换行符等）解释为元素之间的单个空格。要消除该间距，请消除代码本身中元素之间的空白。在这里查看。

未解决的问题：您会看到仍然有蓝色可见。这是因为边框是在元素之外渲染的，而且这个边框不会延伸到你的整个高度li（更不用说ul，它也有蓝色背景集）。你需要弄清楚如何处理这个问题。一种选择是您可以使用:before和:after伪元素，以便元素之间的间距是闭合的。

二、在活动选项卡下方制作一个箭头

我通常制作箭头的方式是使用:after伪元素。以下是步骤：

  1. 我们希望根据需要定位箭头，最好将其设置为position: absolute;。为了使其相对于父级，我们需要明确定义父级上的位置。所以让我们一起去吧position: relative;，因为这不会改变父母的位置。现在我们可以将箭头移动到任何我们想要的地方！
  2. 让我们将伪元素设置为display: block; 并给它空的内容。这使它按我们想要的方式显示。
  3. 您可以使用边框 hack 来创建三角形，也可以使用 unicode 三角形向下字符。我选择在这个 JSFiddle 中使用它。

未解决的问题：现在，您li的 s 宽度不同。这意味着没有任何一行 CSS 代码可以使所有lis 的三角形居中。您需要将lis 设置为相同的宽度，然后定位三角形，或者单独定位每个目标li并根据宽度手动放置三角形。我建议这两种可能性中的前者。

三、我会怎么做

这就是我制作菜单的方式，上面的大部分问题都已解决。也许这将是您工作的地方。

如果您不打算将箭头淡入，那么您可能更喜欢使用边框黑客来创建三角形，它具有更深的浏览器支持。

于 2013-05-20T12:11:34.390 回答