我对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>
我不知道这是浏览器缩放错误还是代码错误。任何帮助深表感谢。谢谢。
答案 0 :(得分:0)
发生这种情况是因为您在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>
答案 1 :(得分: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;
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;