CSS对齐右侧的列表项

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>