CSS将列表项对齐到

Question

我尝试将列表中的项目向右对齐，并将其宽度调整为内容的长度，但似乎没有任何效果。

这是我的代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

以下是使用该代码的页面：

但这是我试图实现的一个快速抛出的例子：

我尝试在display: inline-block;选择器下添加.messages * .message，在text-align: right;下添加.messages .sent，而不是搞砸了整个页面设计。

我一直试图实现我上面发布的内容的时间超过我愿意承认的时间，但我所做的一切似乎都无法奏效。如何在列表中右侧对齐某些项目，同时保持其他项目与左侧对齐？

谢谢！

Answer 1

包含文本的容器（带有背景颜色）应该显示为内联块，下一个包含元素应该左右对齐。

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

简而言之：

.messages .message {
   display:block;
}

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

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

Answer 2

通过删除.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 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>