Question

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

由于我的问题非常具体，我将提供代码作为公共领域，因为你们中的一个CSS向导会帮助我。：）

现在提出我的问题。我一直试图设计这个酒吧，以便它适当地缩放，例如当有人修改ul.chevronbar li的font-size属性或用户在浏览器中点击Control+或Control-时。

我尝试使用两种不同的CSS重置，Eric Meyers重置CSS 2.0和YUI 3.然而，在Firefox中，缩放/缩放“大部分”都有效，而在Chrome中它不起作用（特别是在放大时）。如果可能的话，我想了解如何在Chrome中更好地使用它。

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

enter image description here

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

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

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

Answer 1

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

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

计算的菜单项高度为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>

Answer 2

这里有两个主要问题。

1）首先是你将定位应用于那些没有意义的项目？示例：设置position：absolute; vertical-align：top;什么都不做，因为它只适用于内联元素。

第二个问题是你没有真正详细地考虑这个问题，而且看起来你只是在任何地方坚持编码。

所以退后一步，思考每个元素的作用，并列出实现它的步骤。我们从一个黑盒子开始，最后是一个带有V形符号的盒子。

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

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

3）然后将边距和填充放入空格列表元素。

4）最后，我放入了V形纹并设计了它们。

以下是我所做的一个例子......

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;}

CSS中的“雪佛龙”风格导航栏浏览器扩展问题

2 个答案: