6

我一直在尝试制作一个带有 V 形列表项的 HTML/CSS 导航栏。我在这里提供了我的代码：https ://github.com/twslankard/css-chevron-bar/blob/master/index.html

由于我的问题相当具体，因此我将代码作为公共领域提供，以防你们中的一个 CSS 向导帮助我。:)

现在我的问题。我一直在尝试设计栏以使其正确缩放，例如当有人修改字体大小属性ul.chevronbar li或用户点击Control+或Control-在浏览器中时。

我尝试使用两种不同的 CSS 重置，Eric Meyers 重置 CSS 2.0 和 YUI 3。但是，在 Firefox 中，缩放/缩放“大部分”有效，而在 Chrome 中它不起作用（尤其是在放大时）。如果可能的话，我想要一些关于如何让它在 Chrome 中更好地工作的建议。

这是说明问题的图像。非常感谢您的帮助。

在此处输入图像描述

编辑：这就是我最终的结果。请原谅凌乱的 CSS。稍后我会抽空清理它。

https://github.com/twslankard/css-chevron-bar-2

编辑2：另一个人在这里慷慨地提供了他们对这个问题的解决方案：http: //jsfiddle.net/pXBTK/3/

4

2 回答 2

5

实际上，诀窍是如何使尖部分的高度与它所跟随的菜单项的高度相匹配，从而避免锯齿状的外观。

我猜这样的事情会导致问题：

  • 计算出的菜单项高度为 5 个物理屏幕像素
  • 产生箭头的上下边框必须是 5 的 50%
  • 由于您无法显示半像素，因此都四舍五入，例如 3 像素
  • 加在一起，箭头变成 6 像素高，但菜单项只有 5

似乎很清楚，解决方法是按照说明简单地隐藏溢出。对原始版本真正需要的唯一更改是：

ul.chevronbar {
  ...
  overflow: hidden; /* Add this line */
}

它还需要调整大小以更接近原始外观，但没有它也可以工作。固定高度实际上不是必需的。

这个简化的示例说明了箭头概念，突出显示了箭头的某些部分：

<head><style type="text/css">
ul {
  background-color: lightgray;
  font-size: xx-large;
  overflow: hidden;
  position: relative;
}
li {
  display: inline-block;
  background-color: gray;
  margin-right: 1.5em;
}
li:after {
  content: '';
  border: 0.85em solid blue;
  border-left-color: red;
  border-right-color: red;
  height: 0;
  position: absolute;
  top: -0.2em;
}
</style></head>
<body><ul>
  <li>Lorem Ipsum</li> <li>Foobar</li>
</ul></body>
于 2012-08-03T22:25:42.787 回答
3

这里有两个主要问题。

1）首先是您将定位应用于没有真正意义的项目？示例：当您设置位置时：绝对；垂直对齐：顶部；什么都不做，因为它只适用于内联元素。

第二个是你没有真正详细地考虑过这个问题，看起来你只是在尽可能地坚持编码。

所以退后一步，想想每个元素的作用，并制定实现它的步骤。我们从一个黑盒子开始，最后是一个带有人字形的盒子。

1）我创建了一个固定高度的容器，然后设置为overflow:hidden；这样，任何超过一定高度的东西都不会显示。

2）我设置元素的位置与你做的大不相同。我的列表元素向左浮动。

3）然后放置边距和填充以间隔列表元素。

4）最后，我放入人字形并设计它们。

这是我所做的一个例子......

ul.chevronbar {list-style-type: none; margin: 0; padding: 0; height:50px; width:auto; overflow:hidden;}
ul.chevronbar li {margin: 0; padding: 0; height:50px; width:auto; border:1px solid #000; position:relative; float:left; background:#333; font-size: 1.5em; margin-right: 1em; padding: 0 0.7em; }
ul.chevronbar li a {text-decoration: none; color: #fff; line-height:50px; display:block;}
ul.chevronbar li:before, ul.chevronbar li:after {content: ' '; height: 0; width: 0; position: absolute; top:-2px; border: 1.2em solid transparent; border-left-width: 0.45em; border-right-width: 0.45em;}
ul.chevronbar li:before {border-top-color: #333; border-bottom-color: #333; border-right-color: #333; right: 100%;}
ul.chevronbar li:after {border-left-color: #333; left: 100%; margin-left: -0.01em;}
li.first {padding-left: 0.5em;}
li.first:before {border: none !important ;}
li.last:after {border: none !important;}
于 2012-08-03T20:16:24.817 回答