Question

我有一个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>

视觉上菜单看起来像这样：

\ Menu 1 \ Menu 2 \ Menu 3 \ Menu 4 \ Menu 5 \ Menu 6 \ Menu 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;
}

我遇到的问题是我有一个控件可以根据登录用户自动生成此菜单，并且菜单项的文本会有所不同。我遇到的问题是，因为我使用的是背景图像而不是内嵌图像，我的菜单不可避免地看起来像这样：

\ Menu \ 1 Menu 2 \ Men \ u 3 Menu 4 \ Menu 5 \ Menu 6 \ Menu 7 \

这是有道理的：由于分割器图像不是块级图像，因此跨度内的文本只显示在其上方。我可以通过向每个nav_item添加内嵌图像来解决这个问题，但我希望尽可能保持导航的清洁。在某种程度上我可以应用一种风格，将分频器图像考虑在内，而无需在线添加图像吗？如果重要，分频器图像宽24px。

Answer 1

执行此操作的简单方法是在菜单项上放置右边距，并将背景图像放在该填充区域内。 E.g。

<!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>

CSS导航与背景图像

1 个答案: