html - 设置导航菜单事件选项卡 HTML/CSS 样式的问题

Question

我在设计可以选择包的导航菜单时遇到了一些问题。

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

活跃的绿色 li 选项卡我需要均匀分布在 ul 的整个 with 上

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

其次，在绿色事件标签 li 上，我需要在事件标签的底部中心显示一个向下箭头。

我已经或多或少地完成了一个 fiddle ，只需要帮助来设计它的样式来完成它。

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>

Answer 1

我。为什么还是显示蓝色？

出于某些原因，蓝色仍然显示。我将逐一介绍。

1. 第一个原因是您为li 设置了内边距和蓝色背景色。然而，您将绿色背景颜色分配给您的 a。由于 a 包含在 li 中，并且 li 有填充，因此 a 不可能扩展li 的完整尺寸并覆盖蓝色。 View this JSFiddle, where that problem is corrected.

2. 第二个原因是您的li 被设置为内联元素。内联元素将代码中的所有空白(空格键空格、换行符等)解释为元素之间的单个空格。要消除该间距，请消除代码本身 中元素之间的空白。 View that here.

Unresolved 问题:您会看到仍然可见蓝色。这是因为边框在元素外部呈现，并且此边框不会扩展 li 的整个高度(更不用说 ul 了，它也有蓝色背景放)。你需要弄清楚如何处理这个问题。一种选择是您可以使用 :before 和 :after 伪元素，以便关闭元素之间的间距。

二。在事件标签下方制作一个箭头

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

1. 我们想根据需要定位箭头，最好将其设置为 position: absolute;。为了使其相对于父级，我们需要明确定义父级的位置。所以让我们使用 position: relative;，因为这不会改变父级的位置。现在我们可以随意移动箭头了!
2. 让我们将伪元素设置为display: block；并给它空内容。这使它按我们希望的方式显示。
3. 您可以使用 border hack 来创建三 Angular 形，也可以使用 unicode 三 Angular 形向下字符。我选择使用那个 in this JSFiddle.

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

三。我会怎么做

和here's how I'd make the menu , 上面的大部分问题都解决了。也许这将是您工作的地方。

如果您不打算淡入箭头，那么您可能更愿意使用 border hack to create the triangle ，它具有更深入的浏览器支持。