CSS align list item right

Question

Я пытаюсь выровнять элементы в списке справа и настроить их ширину на длину содержимого, но ничего не работает.

Вот мой код:

.messages { 
 
    overflow: hidden; 
 
    list-style: none; 
 
    padding: 0 0 50px 0; 
 
    margin: 0; 
 
} 
 
.messages .sent { 
 
    background: white; 
 
    color: #424242; 
 
} 
 
.messages .received { 
 
    background: dodgerblue; 
 
    color: white; 
 
} 
 
.messages .sent, 
 
.messages .received { 
 
    padding: 5px 8px; 
 
    margin-bottom: 8px; 
 
    max-width: 80%; 
 
} 
 
.messages * .message { 
 
    margin-bottom: 5px; 
 
} 
 
.messages .sent .message .p { 
 
    text-align: left; 
 
} 
 
.messages * .message p { 
 
    word-wrap: break-word; 
 
    text-align: left; 
 
    font-size: 18px; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<ul class="messages"> 
 

 
    <li class="sent"> 
 
    <div class="message"> 
 
     <p>Hey</p> 
 
    </div> 
 
    </li> 
 

 
    <li class="received"> 
 
    <div class="message"> 
 
     <p>Hey man!</p> 
 
    </div> 
 
    </li> 
 

 
    <li class="sent"> 
 
    <div class="message"> 
 
     <p>What's up?</p> 
 
    </div> 
 

 
    <div class="message"> 
 
     <p>How are ya?</p> 
 
    </div> 
 
    </li> 
 

 
    <li class="received"> 
 
    <div class="message"> 
 
     <p>Not bad</p> 
 
    </div> 
 

 
    <div class="message"> 
 
     <p>Not bad at all</p> 
 
    </div> 
 
    </li> 
 

 
</ul>

А вот что страница выглядит как с помощью этого кода:

Но вот быстро бросили вместе пример чего я пытаюсь достичь:

Я попытался добавления display: inline-block; под селектором .messages * .message и text-align: right; под .messages .sent, который вместо того, чтобы просто облажался весь дизайн страницы.

Я пытаюсь достичь того, что я разместил выше, дольше, чем я согласен, но ничего не работает. Как мне настроить выравнивание определенных элементов вправо в списке, а остальные - влево?

Спасибо!

Answer 1

Проблемы у вас возникли с текстом выравнивания может быть решена путем удаления существующих текстовые выравнивания в .messages .sent .message .p и .messages * .message .p, и заменить его:

.messages .received { 
    text-align: left; 
    clear: both; 
} 

.messages .sent { 
    width: 20%; 
    float: right; 
    clear: both; 
} 

Обратите внимание, что вам нужно, чтобы плавать прямо на сообщения и clear: both как отправленных, так и полученных сообщений. Цвета фона должны быть перемещены в messages .received .message и messages .sent .message, которые нуждаются в их собственных ширине:

.messages .received .message { 
    width: 40%; 
    background: dodgerblue; 
} 

.messages .sent .message { 
    background: white; 
    color: #424242; 
} 

Перетяжка также должна быть обновлена, перемещая его из .messages .sent, .messages .received в .messages * .message p. Я собрал все это для вас в новой скрипке, так что вам не придется беспокоиться слишком много о том, чтобы эти изменения;)

Обновлено скрипку, соответствие запросу дизайн: https://jsfiddle.net/Lbyyk5d7/6/

Answer 2

Контейнер, содержащий текст (с цветом фона) должен отображаться в виде строкового блока, а следующий содержащий элемент должен выравниваться влево или вправо.

https://jsfiddle.net/1zryafq4/1/

Короче:

.messages .message { 
    display:block; 
} 

.messages .message p{ 
    display:inline-block; 
} 

.messages .sent{ 
    text-align:right; 
} 

Answer 3

надежда это то, что вы ищете.

.messages { 
 
    overflow: hidden; 
 
    list-style: none; 
 
    padding: 0 0 50px 0; 
 
    margin: 0; 
 
    background: #efeeec; 
 
} 
 

 
.messages .sent { 
 
    text-align:right; 
 
} 
 

 
.messages .sent p { 
 
    background: white; 
 
    color: #424242; 
 
} 
 

 
.messages .received p { 
 
    background: dodgerblue; 
 
    color: white; 
 
} 
 

 
.messages .sent p, 
 
.messages .received p{ 
 
    display:inline-block; 
 
    padding: 5px 8px; 
 
     margin: 0px; 
 
} 
 

 
.messages .message { 
 
    display:block; 
 
} 
 

 
.messages .sent .message .p { 
 
    text-align: left; 
 
    display:inline; 
 
}

<ul class="messages"> 
 

 
    <li class="sent"> 
 
    <div class="message"> 
 
     <p>Hey</p> 
 
    </div> 
 
    </li> 
 

 
    <li class="received"> 
 
    <div class="message"> 
 
     <p>Hey man!</p> 
 
    </div> 
 
    </li> 
 

 
    <li class="sent"> 
 
    <div class="message"> 
 
     <p>What's up?</p> 
 
    </div> 
 

 
    <div class="message"> 
 
     <p>How are ya?</p> 
 
    </div> 
 
    </li> 
 

 
    <li class="received"> 
 
    <div class="message"> 
 
     <p>Not bad</p> 
 
    </div> 
 

 
    <div class="message"> 
 
     <p>Not bad at all</p> 
 
    </div> 
 
    </li> 
 

 
</ul>