我有一个看起来像这样的 CSS 导航:
<div id="header_nav">
<div class="header_nav_left"></div>
<div class="header_nav_item"><span class="header_nav_item_span">Menu 1</span></div>
<div class="header_nav_item"><span class="header_nav_item_span">Menu 2</span></div>
<div class="header_nav_item"><span class="header_nav_item_span">Menu 3</span></div>
<div class="header_nav_item"><span class="header_nav_item_span">Menu 4</span></div>
<div class="header_nav_item"><span class="header_nav_item_span">Menu 5</span></div>
<div class="header_nav_item"><span class="header_nav_item_span">Menu 6</span></div>
<div class="header_nav_item"><span class="header_nav_item_span">Menu 7</span></div>
<div class="header_nav_item_last"><span class="header_nav_item_span"></span></div>
<div class="header_nav_right"></div>
</div>
菜单看起来像这样:
\菜单1\菜单2\菜单3\菜单4\菜单5\菜单6\菜单7\
我通过在每个 div 中使用背景图像来实现“\”效果。菜单的 CSS 如下:
.header_nav_left {
width:144px;
height:24px;
float:left;
background: url('/images/header_nav/left_cap.jpg') no-repeat;
background-position: right;
}
.header_nav_item {
height:24px;
font-size: 15px;
text-align:left;
float:left;
background: url('/images/header_nav/divider.jpg') no-repeat #fc7a06;
background-position: right;
min-width:75px;
}
.header_nav_item_span {
vertical-align:middle;
padding-left:5px;
}
.header_nav_item_last {
height:24px;
font-size: 15px;
float:left;
background:#fc7a06;
}
.header_nav_right {
height:24px;
float:left;
background: url('/images/header_nav/right_cap.jpg') no-repeat;
background-position: left;
min-width:24px;
}
我遇到的问题是我有一个控件可以根据登录用户自动生成此菜单，并且菜单项的文本会有所不同。我遇到的问题是因为我使用的是背景图片而不是内嵌图片，所以我的菜单不可避免地会变成这样:
\菜单\1菜单2\菜单\u 3菜单4\菜单5\菜单6\菜单7\
这是有道理的:因为分隔图像不是 block 级图像，跨度内的文本只是显示在它的顶部。我可能可以通过向每个 nav_item 添加内联图像来解决这个问题，但我希望尽可能保持导航清晰。有没有办法让我应用一种样式来考虑分隔线图像而不需要内联添加图像？如果重要的话，分隔图像是 24px 宽。
最佳答案
执行此操作的简单方法是在菜单项上放置右填充并将背景图像放置在该填充区域内。例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#header_nav {
list-style: none;
margin: 0;
padding: 0 0 0 144px;
background: url('/images/header_nav/left_cap.jpg') no-repeat;
overflow: hidden;
}
#header_nav li {
float: left;
padding-right: 30px;
background: #fc7a06 url('/images/header_nav/divider.jpg') no-repeat right;
text-align: center;
min-width: 75px;
}
</style>
</head>
<body>
<ul id="header_nav">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
<li><a href="">Menu 5</a></li>
<li><a href="">Menu 6</a></li>
<li><a href="">Menu 7</a></li>
<li><a href="">Menu 8</a></li>
</ul>
</body>
</html>
关于html - 带背景图片的 CSS 导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24472894/