无法获得右侧的标签内容

Question

我有一个特殊的问题，标签内容没有漂浮在右侧，因为它的标签也位于右侧。以下是获得更好主意的图片：

我已尝试将标签内容浮动但不起作用。相反，它过去了我看不到任何东西。 Live Chat和Mail Us选项卡都存在此问题。

以下是codepen。

HTML代码

<div class="tab-pane livechat wow animated bounceInLeft" id="chat">
     <div class="chatwidget">
                <a href="#" class="wow animated shake">Click for Chat</a>
     </div>
</div>

CSS3

.livechat {
position: absolute;
bottom: 0px;
width: 50%;
background-color: #eee;
height: 370px;
text-align: center;
box-shadow: 0 0 20px grey;
float: right;
}
.chatwidget {
  padding: 150px;
  font-size: 24px;
 }

Answer 1

要右对齐绝对定位元素，请使用right: 0;代替float: right，float对绝对定位元素没有影响。

Updated codepen

.livechat {
    position: absolute;
    bottom: 0px;
    width: 50%;
    right: 0;
    background-color: #eee;
    height: 370px;
    text-align: center;
    box-shadow: 0 0 20px grey;
}

Answer 2

而不是float:right，请使用right:0px;

.livechat {
    position: absolute;
    bottom: 0px;
    width: 50%;
    background-color: #eee;
    height: 370px;
    text-align: center;
    box-shadow: 0 0 20px grey;
    right: 0;
}

Answer 3

在将position：absolute添加到livechat元素之前，您应该添加位置：相对于其中一个父元素，如下所述。更好的是身体标签。并且说得对：0;而不是浮动：右;。

体{

position: relative;

}

.livechat {

 position: absolute;
 bottom: 0px;
 width: 50%;
 background-color: #eee;
 height: 370px;
 text-align: center;
 box-shadow: 0 0 20px grey;
 right: 0;

}