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>