Question

我有以下html：

        <div class="chat-scroll height-full">
            <div class="width-full" style="text-align: left">
                <div class="bubble-left"></div>
            </div>
            <div class="width-full">
                <div class="bubble-right" style="text-align: right"></div>
            </div>
        </div>

这是css：

.height-full {
    height: 100%;
}

.width-full {
    width: 100%;
}


  .bubble {
    position: relative;
    max-width: 90%;
    min-height: 30px;
    padding: 5px;
    background: -webkit-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -moz-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -ms-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: linear-gradient(180deg, #2196F3 5%, #3B4FCC 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2196F3', endColorstr='#3B4FCC');
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 10px 5px;
  }

  .bubble-left {
    @extend .bubble;
    left: 0;

  }

  .bubble-right {
    @extend .bubble;
    right: 0;
  }

正如您在屏幕截图中看到的那样，问题是：框未左右对齐，右侧对齐。 enter image description here

我做错了什么？

Answer 1

div不是文字。它们是元素。因此，它们不受text-align的影响。

对齐div：

left：默认，什么都不做
center：margin-left: auto; margin-right: auto;
右：margin-left: auto

Answer 2

由于它们位于全宽容器中，因此可以浮动元素。如果您希望文本与某一侧对齐，则还需要相应地设置文本对齐。

  .bubble-left {
    @extend .bubble;
    float: left;   }

  .bubble-right {
    @extend .bubble;
    float: right;   }

Answer 3

html文件：

<div class="chat-scroll height-full">
        <div class="width-full">
            <div class="bubble-left" style="text-align:left">left</div>
            <div class="bubble-right" style="text-align:right">right</div>
        </div>
    </div>

和css：

.height-full {
height: 100%;
}

.width-full {
    width: 100%;
}
  .bubble {
    position: relative;
    max-width: 90%;
    min-height: 30px;
    padding: 5px;
    background-color:blue;
    background: -webkit-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -moz-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -ms-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: linear-gradient(180deg, #2196F3 5%, #3B4FCC 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2196F3', endColorstr='#3B4FCC');
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 10px 5px;
  }

  .bubble-left {
    @extend .bubble;
    background: -webkit-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -moz-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -ms-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: linear-gradient(180deg, #2196F3 5%, #3B4FCC 100%);
     width:90%;
    margin-right:auto;

  }

  .bubble-right {
    @extend .bubble;
    background: -webkit-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -moz-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: -ms-linear-gradient(90deg, #3B4FCC 5%, #2196F3 100%);
    background: linear-gradient(180deg, #2196F3 5%, #3B4FCC 100%);
    width:90%;
    margin-left:auto;
  }

jsfiddle：http://jsfiddle.net/rtyygxdd/2/

文本对齐不起作用（css）

3 个答案: