margin left 和 100% width push 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

像这样使用 footer 的宽度：

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>

Answer 2

添加

.text { margin-right: 50px;}

margin left 和 100% width push float 文本移出浏览器边缘

Margin left and 100% width push float text move beyond the browser edge

html

css

css-position

css-float