Bir sözdizimi konumlandır: bir öğe öğesinin sağ tarafındaki öğe

Question

Bir menü öğesi öğesinin sağ tarafında sözde bir :after öğe 30 piksel konumlandırmaya çalışıyorum.

Öğenin metninin uzunluğu ne olursa olsun öğenin 30 piksel sağda olmasını istiyorum.

Aşağıdaki kodu, bu sorun için gerekli olduğunu düşündüğüm en düşük değere çıkardım.

Bunun bir mobil menü olduğunu unutmayın. Menü ve a etiket bağlantısı, tarayıcının (telefonun) genişliğini genişletir.

ben gitmek için eleman almak için sol 150p için konumlandırmak gerekiyor görebileceğiniz gibi:

#menu-main-menu-1 li { 
 
    position: relative; 
 
    list-style: none; 
 
} 
 
#menu-main-menu-1 li a { 
 
    padding: 18px 0; 
 
    display: block; 
 
    text-align: center; 
 
} 
 
#menu-main-menu-1 a:after { 
 
    content: "\25CF"; 
 
    position: absolute; 
 
    right: 0; 
 
    left: 150px; 
 
    top: 20px; 
 
}

<ul id="menu-main-menu-1"> 
 
    <li class="menu-item"> 
 
    <a href="#">Menu Item</a> 
 
    </li> 
 
    <li class="menu-item"> 
 
    <a href="#">Long Menu Item Text</a> 
 
    </li> 
 
</ul>

Yukarıdaki kod aşağıdaki sonucu üretir Öğenin sağında 30 piksel. Çalışıyor, ancak menü öğesinin çok fazla metin içeriyorsa, 150px değerini aşacağı ve öğenin metinde yer alacağı bir sorun görebiliyorum. Örneğin:

olursa olsun uzunluk metninin sağında 30px edilecek eleman gerekiyor. Yani olmazdı gibi:

İşte

JSFiddle link: JSFiddle

I (rengini bu soruya işlevselliğini etkilemeyen gereksiz stilleri birçok elimden bildirmek isteriz, yazı tipleri, vb.)

Herhangi bir yardım çok takdir edilecektir!

Teşekkür

Answer 1

#menu-main-menu-1 li { 
    position: relative; 
    list-style: none; 
} 

#menu-main-menu-1 li a { 
    padding: 18px 0; 
    display: inline-block; 
    text-align: center; 

    // Recommended to recenter text 
    width: 100%; 
    margin: 0 auto; 
} 

#menu-main-menu-1 a:after { 
    content: "\25CF"; 
    padding-left: 30px; 
} 

Ben metni kaydırma gereken blok, yani bir satır içi blok yerine bir bloğa #menu-main-menu-1 li a değişti, sonra sağa 30px pede :after eleman değiştirdi.

İstediğiniz bu mu? https://jsfiddle.net/tvfudkgt/1/

Answer 2

#menu-main-menu-1 li { 
 
    list-style: none; 
 
} 
 
.menu-item { 
 
    display: flex;    /* 1 */ 
 
    justify-content: center; /* 2 */ 
 
} 
 
.menu-item a { 
 
    margin: 0 30px;   /* 3 */ 
 
    padding: 18px 0; 
 
} 
 
.menu-item::after { 
 
    content: "\25CF"; 
 
    align-self: center;  /* 4 */ 
 
} 
 
.menu-item::before { 
 
    content: "\25CF";   /* 5 */ 
 
    visibility: hidden; 
 
}

<ul id="menu-main-menu-1"> 
 
    <li class="menu-item"> 
 
    <a href="#">Menu Item</a> 
 
    </li> 
 
    <li class="menu-item"> 
 
    <a href="#">Long Menu Item Text</a> 
 
    </li> 
 
</ul>

Notlar:

1. esnek kabın oluşturulması (blok seviyesi; tam genişliği taşır)
2. Horizontally center child elements.
3. Bağlantılar/menü öğeleri 30 piksel yatay kenar boşluklarına sahiptir
4. Sağ taraftaki sözde öğe dikey olarak ortalanmış ve her zaman menü öğesinin sağında (metin uzunluğuna bakılmaksızın) 30 pikseldir.
5. Eşit denge için soldaki ikinci bir sözde öğe eklenir. Bu, kapta ortalanmış menü öğelerini tutar. visibility: hidden ile gizlenmiştir. (more info)