css - 为什么我的 CSS 中的椭圆形 div 在我调整大小或还原它时会放在我网站的右侧墙(边框)旁边?
问题描述
我试图在我的椭圆形“div”和我的网站的右墙(边框)之间留出空间,但它似乎不起作用。可能是什么问题?这是代码:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
div.oval1 {
width: 1460px;
margin: 80px 0px 30px 30px;
background-color: black;
opacity: 10%;
height: 600px;
border-radius: 1%;
}
</style>
<div class="oval1"> </div>
</body>
</html>
网站链接:https ://www.w3schools.com/code/tryit.asp?filename=GQYCSO6PHXZM
解决方案
为了查看元素右侧的边距,至少有一个父元素需要具有确定的宽度。父元素的宽度应该大于左边距、元素宽度和右边距之和。
Tt 与底部边距相同,在这种情况下,父级高度应大于顶部和底部边距与元素高度之和。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
width: 1520px;
}
div.oval1 {
width: 1460px;
margin: 80px 30px 30px 30px;
background-color: black;
opacity: 10%;
height: 600px;
border-radius: 1%;
}
</style>
</head>
<body>
<div class="oval1">
</body>
</html>
推荐阅读
- javascript - 无法将变体数据传递到 shopify 表单
- android - 在 Android 中使用 FFMPEG 覆盖 2 个视频,提供低分辨率视频输出
- azure - Azure:如何以编程方式创建事件订阅
- c# - 如何在两个 WPF 应用程序之间共享设置?
- python - python (txt 和 tkinter)
- android - (MAC OS) mksdcard:可执行文件中的 CPU 类型错误
- autofilter - 如何停止自动过滤宏间歇性失败
- node.js - AWS NodeJS Lambda 电子邮件功能无法正常工作
- html - 如何从网站中提取数据到 Google 表格
- javascript - 未捕获的类型错误:无法读取未定义的属性“地图”-React js