html - 对齐 CSS 箭头

Question

JSFiddle

我确实尝试将绿色箭头对齐在中间，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 对齐的标准格式，才能真正以正确的方式做到这一点。

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

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>