1

我在这里的垂直子导航上有一个 CSS 箭头：http ://rumble.com.au/technology/ 但由于某种原因，我无法让它正确显示。它应该在右手边的外侧，但正如你所见，它的一半已被切断。如果我将箭头向右移动，它就会消失。我怎样才能让它出现在右侧？

我希望它在这个页面上工作：http: //cssarrowplease.com/

谢谢

4

2 回答 2

3

在你的 css.z-tabs li:hover:after, .z-tabs li:focus:after, .z-tabs li.z-active:after 类第 389 行更改left:95% to left: 93%

于 2013-06-18T09:07:16.063 回答
0

我会做没有彩色背景的 LI 项目，只有箭头，在 LI 内部，A 元素将有足够的边距以适合箭头。

颜色背景将在 A 元素中。

在这个例子中，你应该把背景放在灰色背景和虚线边框之间：

ul {
    list-style: none;
}

ul li {
    width: 120px;
    border: dotted 1px gray;
    line-height: 25px;
    margin-bottom: 5px;
}
ul li a{
    width: 100px;
    margin-right: 5px;
    background-color: #ccc;
    line-height: 25px;
    display: block;
}

我使用了你的部分 HTML

<ul class="z-tabs-nav z-tabs-desktop">
    <li class="z-tab z-first z-active" data-link="tab1" style=""><a class="z-link">Cloud</a>
    </li>
    <li class="z-tab" data-link="tab2" style=""><a class="z-link">Onelogin</a>
    </li>
    <li class="z-tab" data-link="tab3" style=""><a class="z-link">Nimble CRM</a>
    </li>
    <li class="z-tab z-last" data-link="tab4" style=""><a class="z-link">Service Now</a>
    </li>
</ul>

http://jsfiddle.net/7pex9/

于 2013-06-18T09:02:18.193 回答