Как выровнять все ссылки LI, но правильно отрегулировать изображения в пределах одной ссылки LI?

Question

У меня есть следующий код, который используется в Выпадающее меню:

.menu-label { 
 
    font-size: 0; 
 
} 
 

 
.menu-label.coming-soon:before { 
 
    background: url(lb-coming-soon1.png); 
 
    width: 40px; 
 
    height: 20px; 
 
    margin-top: -10px; 
 
}

<ul> 
 
    <li><a href="#">Soap Company</a><span class="menu-label coming-soon"></span></li> 
 
    <li><a href="#">Apparel <span class="menu-label coming-soon"></span></a></li> 
 
</ul>

То, что я пытаюсь сделать, это меню отображается текст ссылки выравнивание по левому краю , и соответствующее изображение «Coming Soon» выравнивается вправо.

прямо сейчас, он выглядит разъединенным. Я не уверен, как/что менять в css, чтобы сделать выравнивание работой как желание (я младший css/веб-парень, так голый со мной на этом!).

Приветствия и благодарности!

Answer 1

есть несколько способ, согласно которому структура и какие браузеры вы хотите поддержать.

примеры:

/* reset and basic makup */ 
 
ul { 
 
    padding:2em; 
 
    } 
 
li { 
 
    background:lightgray; 
 
    display: block; 
 
    overflow: hidden; 
 
    margin: 3px; 
 
} 
 
a { 
 
    display:inline-block; 
 
    text-decoration:none; 
 
    text-align:left; 
 
    color:green 
 
    } 
 

 
.menu-label.coming-soon:before {/* include image*/ 
 
    display: inline-block; 
 
    content: url(http://dummyimage.com/40x20/abc/f00&text=soon); 
 
    width: 40px; 
 
    height: 20px; 
 
    vertical-align: middle; 
 
} 
 

 
/* float first element and align right text */ 
 
li.float { 
 
    text-align: right; 
 
} 
 
a.float { 
 
    float: left; 
 
} 
 
/* end float */ 
 

 
    /*=== */ 
 

 
/* flex & justify-content */ 
 

 
.flex { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
/* end flex */ 
 

 
    /*=== */ 
 

 
/* text-align */ 
 

 
.justify, .justifyli{ 
 
    display: block; 
 
    text-align: justify; 
 
    line-height:0em; 
 
} 
 
[class^="justify"]:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 99%; 
 
} 
 
/* end text-align */

<ul> 
 
    <li class="float"> 
 
    <a href="#" class="float">float a</a> 
 
    <span class="menu-label coming-soon"></span> 
 
    </li> 
 
    <li class="flex"> 
 
    <a href="#" >flex li</a> 
 
    <span class="menu-label coming-soon"></span> 
 
    </li> 
 
    <li> 
 
    <a href="#" class="flex">flex a 
 
     <span class="menu-label coming-soon"></span> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#" title="buggy, text needs to be wrapped" class="justify">justify a 
 
     <span class="menu-label coming-soon"></span> 
 
    </a> 
 
    </li> 
 
    <li class="justifyli"> 
 
    <a href="#">justify li</a> 
 
    <span class="menu-label coming-soon"></span> 
 
    </li> 
 
</ul>

Answer 2

Вы можете использовать flexbox и justify-content для разделения элементов.

li { display: flex; justify-content: space-between; }

И похоже, у вас есть HTML несоответствие между пунктами списка. Изменение 2-ым в

<li><a href="#">Apparel</a> <span class="menu-label coming-soon"></span></li>