Question

想象一下，你有两个相邻的列。第一个（最左边）是主导航，第二个是辅助导航。在这些的右边是实际内容。

我在两列中都有链接作为无序列表。通过更改背景颜色突出显示每个中的选定链接。设计的最后一部分是所选项目需要在右侧“伸出”，并采用尖箭头设计（我已经为其提供了图像）。

这就是我遇到的麻烦。我需要将图像放在PrimaryNavigationSelected的最右边。我试图将li元素扩展到它的父边框之外，并将箭头图像作为背景附加。 这是最好的方法吗？你能否让li元素超出其父元素的边界？

该系统用于帮助系统，它将使用嵌入式IE7控件，但该设计计划最终用于在线帮助。

下面的代码：注意 - SecondaryNavigation类似于Primary，除了颜色的变化，我觉得发布超过160行CSS感觉不舒服。如果您可以向主导航展示如何进行操作，我可以将其扩展到辅助导航。

HTML

<body>
<div id="PrimaryNavigation">
<ul>
<li class="PrimaryNavigationDeselected"><a href="#">Primary Navigation Goes Here</a></li>
<li class="PrimaryNavigationDeselected"><a href="#">Primary Navigation Goes Here</a></li>
<li class="PrimaryNavigationSelected"><a href="#">Primary Navigation Goes Here</a></li>
<li class="PrimaryNavigationDeselected"><a href="#">Primary Navigation Goes Here</a></li>
</ul>
</div>
<div id="SecondaryNavigation">
<ul>
<li class="SecondaryNavigationSelected"><a href="#">Secondary Navigation Goes Here</a></li>
<li class="SecondaryNavigationDeselected"><a href="#">Secondary Navigation Goes Here</a></li>
<li class="SecondaryNavigationDeselected"><a href="#">Secondary Navigation Goes Here</a></li>
<li class="SecondaryNavigationDeselected"><a href="#">Secondary Navigation Goes Here</a></li>
</ul>
</div>

CSS

#PrimaryNavigation {
position: absolute;
height: 100%;
width: 20%;
background-color: #2BB1E4;
}

#PrimaryNavigation * {
    position: relative;
    margin: 0; 
    padding: 0; 
}

#PrimaryNavigation ul {
    list-style-type: none;
    padding: 44px 0 0 0; 
}

#PrimaryNavigation li {
    padding: .2em 0;
    padding-left: 1em;
    margin-bottom: 1em;
}

#PrimaryNavigation a {
    color: white;
    text-decoration:none;
}

.PrimaryNavigationDeselected {
    color: #FFFFFF;
}

.PrimaryNavigationDeselected:hover {
    color: #FFFFFF;
}

.PrimaryNavigationSelected {
    margin: 1em;
    color: #FFFFFF;
    background-color: #0079A7;
}

.PrimaryNavigationSelected:hover {
    color: #FFFFFF;
    background-color: #0079A7;
}

Answer 1

嗯，你的策略应该是在li的右侧包含背景图像，然后向右添加填充，以使文本显示在图像的左侧。

或者你也可以考虑使用：选择后。

Answer 2

管理以使其正常工作。

首先，它最终会出现的环境是IE7控件，所以我不得不添加

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

在我设法让它在IE8中运行之后，让代码在IE7中工作。

对于IE8，我需要将以下内容添加到PrimaryNavigationSelected：

padding-right: 8px; 
right: -8px; 
margin-left: -8px; 
color: #FFFFFF;
background: transparent url(arrow.png) 100% 50% no-repeat;

但是对于IE7，您需要删除right和margin-left属性。

奇怪，但确实如此。

将元素扩展到其父边框之外

2 个答案: