我应该在居中的UL菜单的两侧添加一条水平线。页面上有背景图像，因此解决方案必须具有透明背景。线条必须到达屏幕的两侧。我见过几个例子，https://stackoverflow.com/a/23584310/4266235非常接近我的需要。
但我有一点不能解决的问题。在首页上，我在菜单下面有一个大徽标，但在所有其他页面上，徽标较小，位于菜单的左侧。
这就是我想要的：
首页：
|-------- Home Page1 ... PageN --------|
| [Large logo] |
所有其他页面：
|---- [small logo] Home Page1 ... PageN ----|
第一个问题是小徽标是使用ul：before完成的。像
这样的东西#navi { margin: 0; text-align: center; }
#navi ul { list-style-type: none; }
#navi ul:before { display: inline-block; content: url("small-logo.png"); vertical-align: middle;}
.front-page #navi ul:before { content: ""; }
首页有＆lt; body class =＆＃34;首页＆＃34;＆gt;
如果我使用＆lt; img＆gt;相反，对于小徽标，我可以在首页上获得很好的线条，但在其他页面上，左边的一个继续太靠近菜单。显然是因为我无法弄清楚如何在徽标之前阻止它。很好，我的意思是我必须更改我链接的答案中的百分比，让它们达到窗口边框，但即使是100％，如果我用CTRL-minus缩放页面，他们也不会触摸边框。
修改：这是一个小提琴示例https://jsfiddle.net/sowcoox1/红线也应出现在左侧。如果有徽标图像，则该行应在之前停止，如果没有，则在Home文本之前停止。此外，线条似乎到达屏幕边框，但如果缩小，则表明线条不够长。
答案 0 :(得分：0)
您可以将该行创建为包装元素的背景图像，并为ul元素提供覆盖其背后一行的背景：
https://jsfiddle.net/sowcoox1/1/
如果您无法为ul提供背景颜色，则可以在包装元素中使用multiple background-images，或者为该行使用单独的元素。如果您知道ul的宽度，这将会更容易。