Question

我对Web开发还很陌生，所以我做错了可能是一个非常新手。

问题：：我试图在右上角添加一个圆圈。为此，我正在制作一个div，并给它100px height和width和border radius 50%来画一个圆圈并向右移动，我正在做left 100%。 / p>

我希望浏览器在右上上显示一个圆圈，而不是我的浏览器引入了一个滚动条并将该圆圈推向更右端。

这是我尝试过的代码以及我面临的问题的屏幕截图。

<!DOCTYPE html>
<html>

  <head>
    <title>Scenario 6</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style type="text/css">
      #circle {
        width: 100px;
        height: 100px;
        border: 2px solid red;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        left: 100%;
      }
    </style>
  </head>

  <body>
    <div id="circle"></div>
  </body>

</html>

预期-
实际-

我不知道这是浏览器缩放错误还是代码错误。任何帮助深表感谢。谢谢。

Answer 1

发生这种情况是因为您在left: 100%;上设置了#circle。因此，圆圈开始从startX = 100% width of screen（左= 100％）位置开始绘制。因此，可以将其绘制在屏幕外部。

使用left: 100%;代替right: 0，问题将得到解决。

<!DOCTYPE html>
<html>

<head>
  <title>Scenario 6</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style type="text/css">
    #circle {
      width: 100px;
      height: 100px;
      border: 2px solid red;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="circle"></div>
</body>

</html>

Answer 2

请参见以下代码：

<!DOCTYPE html>
<html>
<head>
 <title>Scenario 6</title>
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <style type="text/css">
    #circle {
        width: 100px;
        height: 100px;
        border: 2px solid red;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        left: calc(100% - 100px);
        box-sizing: border-box;
    }
 </style>
</head>
<body>
 <div id="circle"></div>
</body>
  
</html>

对于左侧位置，您必须添加left: calc(100% - 100px)。减去100px，因为您的框的宽度为100px，并添加box-sizing: border-box;

剩余的CSS：超出设备屏幕尺寸的100％

2 个答案: