li должен оставаться правым

Question

У меня есть список с тремя элементами списка с разной шириной. Если первый li больше, то другой, элементы списка, плавающие влево (снимок экрана).

Есть ли способ, чтобы предотвратить это?

Мой HTML

<ul> 
    <li class="nav-button"> 
     <nav class="main-nav" style="width:400px"> 
     </nav> 
    </li> 
    <li style="width:200px"><a href="#"></a><i class="fa fa-envelope"></i></li> 
    <li style="width:200px"><a href="#"></a><i class="fa fa-key"></i></li> 
</ul> 

Answer 1

Вот что вам нужно. A working JSFIDDLE (пожалуйста, добавьте в свой рабочий вопрос в будущем, так что у нас есть с чем работать).

То, что я сделал, было дать ваш набор ширину ul, с самым большим li заполнением 100% ul и остальные заполнения 50% ul. (так как это было и в вашем примере, 400px и 200px). Предоставление этих блоков float: right; помещает их в одну строку. Давая margin-left исправил эту проблему (с 50% + 50% + 10px + 10px> 100% ширины).

HTML

<ul> 
    <li class="nav-button"> 
     <nav class="main-nav" style="width:400px;"> 
     </nav> 
    </li> 
    <li ><a href="#"></a><i class="fa fa-envelope"></i></li> 
    <li ><a href="#"></a><i class="fa fa-key"></i></li> 
</ul> 

Я удалил все рядный CSS с HTML, вы должны также сделать это в вашем проекте.

CSS

ul { 
    padding: 0; 
    width: 400px; 
} 

li { 
    height: 100px; 
    list-style: none; 
    width: 50%; 
    background: blue; 
    margin-bottom: 5px; 
} 

li.nav-button { 
    width: 100%; 
    background: red; 
} 

li:not(.nav-button) { 
    float: right; 
    margin-left: 10px; 
}