anchor 元素应该在 div 元素下方，因为我使用了底部边距 但是 div 和 anchor 都显示在同一行中，还有 div 的宽度 仅达到段落的长度。请帮助我理解。
CSS 代码:
div {
position: fixed;
border: 5px solid black;
height: 300px;
width: 500px;
margin-left: 50px;
border-radius: 5px;
background-color: #668284;
margin-bottom: 50px;
}
#id1 {
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div>
<p id="id1">Welcome to the group</p>
</div>
<a href="yahoo.com">Yureka</a>
</body>
</html>
最佳答案
您面临的问题是因为您在 div 上设置的 position:fixed
1.anchor 显示在 div 之前，因为您的 div 定位固定。固定位置元素独立于所有其他元素，不属于文档流，并且与视口(viewport)或浏览器窗口相关。 2.paragraph 占div 的全宽是因为html 中的P 标签是 block 级元素， block 级元素占父元素的全宽并且不为任何其他元素留出空间。
解决方法: 1.如果你想要div下面的 anchor 标记，只需从div中删除绝对位置 2.如果你想让 p 标签不占用 div 的整个宽度，只需将其设置为 display:inline-block
下面是建议的解决方案的工作示例
div {
border: 5px solid black;
height: 300px;
width: 500px;
border-radius: 5px;
background-color: #668284;
margin-bottom: 50px;
}
#id1 {
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}<div>
<p id="id1">Welcome to the group</p>
</div>
<a href="yahoo.com">Yureka</a>
</body>关于html - 为什么 anchor 元素不跟随 div 底部边距并且 div 宽度不合适？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32793792/