Question

我确实尝试将a中间的绿色箭头对齐，但我无法这样做。我确实margin-left与%一起试用，总是关闭。

有人可以帮忙吗？累了。

感谢。

Answer 1

原因是你的箭头是绝对定位的，但不是相对于a。

对你的css进行以下更改，它可以正常工作

.container-menu nav ul li.active a,
.container-menu nav ul li a:hover{
    color: #8fb63a;
    text-decoration: none;
    position:relative;
}

.container-menu nav ul li.active a::after{
    border-bottom: 6px solid #8fb63a;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content: "";
    display: inline-block;
    height: 0;
    margin-top: 34px;
    position: absolute;
    vertical-align: top;
    width: 0;
    left:50%;
}

Answer 2

你的问题太复杂了。

你的HTML和CSS需要遵循div alignment中的标准格式，才能以正确的方式实现这一点。

这个小提琴应该让你开始：

http://jsfiddle.net/2fyGp/4/
无格式
http://jsfiddle.net/2fyGp/6/
一些格式

<style>
.x0 {width:100%;float:left;background-color:#333;border-bottom:2px solid #8FB63A;}
.x0 div{width:25%;float:left;text-align:center;}
.x0 div:hover {color:#8FB63A;}
.x1 div{width:100%;float:left;color:#fff;}
</style>

<div class="x0">
    <div class="x1">
        <div>
            one
        </div>
        <div>
            arrow
        </div>
    </div>
    <div class="x1">
        <div>
            two
        </div>
        <div>
            arrow
        </div>
    </div>
    <div class="x1">
        <div>
            three
        </div>
        <div>
            arrow
        </div>
    </div>
    <div class="x1">
        <div>
            four
        </div>
        <div>
            arrow
        </div>
    </div>
</div>

对齐CSS箭头

2 个答案: