Question

https://i.stack.imgur.com/I3FWb.png

我的应用程序中的消息气泡有问题，它们不会向右对齐，我试过弄乱显示、边距、浮动，等等。我决定把它留给专业人士。

现在我的层次结构看起来像这样：

.Message {
  width: fit-content;
  height: auto;
  margin-left: 10px;
}

.Message>h5 {
  font-size: 12pt;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  opacity: 0.3;
  margin-bottom: 0px;
}

.Message>ul {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.Message>ul>li {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 12pt;
  width: fit-content;
  margin-top: 5px;
  background-color: rgb(45, 45, 45);
  padding: 6px;
  border-radius: 8px;
}

.Message>br {
  margin: 0px;
}

#MSGOUT {
  text-align: left;
  float: left;
}

#MSGIN {
  float: right;
  margin-right: 5px;
  text-align: right;
}

<div class="Message" id="MSGIN">
  <h5>UserName</h5>
  <ul>
    <li>Message1</li>
    <li>Message2</li>
  </ul>
</div>

Answer 1

.Message {
  width: fit-content;
  height: auto;
  margin-left: 10px;
}

.Message>h5 {
  font-size: 12pt;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  opacity: 0.3;
  margin-bottom: 0px;
}

.Message>ul {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  list-style-type: none;
  margin: 0;
  padding: 0;
  direction:rtl;
}

.Message>ul>li {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 12pt;
  width: fit-content;
  margin-top: 5px;
  background-color: rgb(45, 45, 45);
  padding: 6px;
  border-radius: 8px;
}

.Message>br {
  margin: 0px;
}

#MSGOUT {
  text-align: left;
  float: left;
}

#MSGIN {
  float: right;
  margin-right: 5px;
  text-align: right;
}

<div class="Message" id="MSGIN">
  <h5>UserName</h5>
  <ul>
    <li>Message1 longer</li>
    <li>Message2</li>
  </ul>
</div>

如果添加“direction:rtl;”到“.Message>ul”，您将反转列表放在一起的方式。这样，项目就会在右侧对齐。

Answer 2

使用“display: inline-block;”它允许将块元素（如内联元素）与“text-align: right;”对齐
但是请注意，如果内联元素旁边存在空格字符（因为它是文本），则会创建空格。为避免这种情况，请始终确保只有没有制表符或空格的 html 元素。

它通常兼容 ie6 ;)

抱歉翻译。

ul.MyList {
  background-color: #f0f0f0;
  display: block;
}

ul.MyList ul {
  margin: 0;
  margin-right: 20px;
}

ul.MyList li {
  list-style: none;
  padding-bottom: 10px;
  text-align: right;
}

.MyListContent {
  background-color: #000;
  color: #fff;
  display: inline-block;
  padding: 0.2em 1em;
  text-align: left;
}

.MyListContent.IAmBig {
  width: 150px;
}

<ul class="MyList">
  <li><span class="MyListContent">Content 0</span></li>
  <li><span class="MyListContent IAmBig">Content 1</span></li>
  <li><span class="MyListContent">Content 0</span></li>
  <ul>
    <li><span class="MyListContent">Sub Content 0</span></li>
    <li><span class="MyListContent">Sub Content 1</span></li>
  </ul>
  <li><span class="MyListContent">Content 2</span></li>
</ul>

Answer 3

最简单的方法是使用 flexbox

.Message{
display:flex;
flex-direction:column;
align-items:flex-end;
}

ul{
list-style-type:none;}

h5{
margin:0}

<div class="Message" id="MSGIN">
  <h5>UserName</h5>
  <ul>
    <li>Message1</li>
    <li>Message2</li>
  </ul>
</div>

Answer 4

您可以使用 flexbox

.Message {
  width: fit-content;
  height: auto;
  margin-left: 10px;
  
  width: 200px;
  border: 1px solid black
}

.Message>h5 {
  font-size: 12pt;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  opacity: 0.3;
  margin-bottom: 0px;
}

.Message>ul {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  list-style-type: none;
  margin: 0;
  padding: 0;
  
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.Message>ul>li {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 12pt;
  width: fit-content;
  margin-top: 5px;
  background-color: rgb(45, 45, 45);
  padding: 6px;
  border-radius: 8px;
}

.Message>br {
  margin: 0px;
}

#MSGOUT {
  text-align: left;
  float: left;
}
 
#MSGIN {
  float: right;
}

<div class="Message" id="MSGIN">
  <h5>UserName</h5>
  <ul>
    <li>Message1</li>
    <li>Message2</li>
  </ul>
</div>

CSS - 我如何将这些“li”对齐到右边？

4 个答案: