Aligner la flèche CSS

Question

JSFiddle

J'ai essayé d'aligner la flèche verte au milieu de l'image. a mais je ne suis pas en mesure de le faire. J'ai essayé margin-left con % avec toujours désactivé.

Quelqu'un peut-il nous aider ? Je suis fatigué.

Merci.

Answer 1

La raison en est que vos flèches sont positionnées de manière absolue, mais pas de manière relative par rapport à l'a.

Apportez les modifications suivantes à votre css et cela fonctionne

.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

Vous compliquez excessivement le problème.

Votre HTML et votre CSS doivent respecter le formatage standard de l'alignement des divs pour que la procédure soit vraiment correcte.

Ce violon devrait vous permettre de commencer :

http://jsfiddle.net/2fyGp/4/
Pas de formatage
http://jsfiddle.net/2fyGp/6/
Un peu de formatage

---

<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>