css - 网页大小调整中断菜单项

Question

我正在开发一个网站，问题是当我(水平)调整浏览器大小时，菜单中的主页链接被破坏了。很难用语言解释发生了什么，所以在这里查看:http://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html .

灰色背景是一张图像，右上角被切掉了。切割该区域后，我将该区域设为透明。因此，它是透明背景上的梯形。

我的问题是:调整大小时如何防止梯形变成矩形？

Answer 1

如果你想要这样的东西。

如果菱形位于两个选项卡之间，那么您应该为 li 元素(全部)指定特定的宽度。不要为此使用百分比。像这样

 .menu > li#home {
 display: inline;
 float: left;
 background: none;
 background-image: url(../img/home.png);
 width: 273px;   /* same as your image size */
 }

还有你的两个标题图片

img#logo {
position: absolute;
top: 10px;  /* Change it as it sets in the gap */
left: 250px; /* Change it as it sets in the gap */
width: 140px;
height: 90px;
}