html - 左边距和 100% 宽度插入 float 文本移出浏览器边缘

Question

我有以下 html:

<div class="footer">
  <div class="text">
  This text float to right
  </div>
</div>

以及以下 CSS:

.footer {
  position: fixed;
  top: 0;
  left:0;
  background-color: pink;
  width: 100%;
  margin-left: 50px;
}
.text {
  float: right;
}

这是 jsfiddle 示例:https://jsfiddle.net/mddc/68tgqxpa/4/

问题在于“此文本向右浮动”的某些部分被推到了浏览器边缘之外。如何使用CSS让全文显示到浏览器边缘？

左边距无法删除。

Answer 1

使用页脚的宽度，如下所示:

width: calc(100% - 50px);

就这样吧!让我知道您的反馈。谢谢!

.footer {
  position: fixed;
  top: 0;
  left: 0;
  background-color: pink;
  width: calc(100% - 50px);
  margin-left: 50px;
}
.text {
  float: right;
}

<div class="footer">
  <div class="text">
    This text float to right
  </div>
</div>