Question

锚元素应该在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>

Answer 1

您遇到的问题是因为您已在div上设置的位置：已修复

1.anchor在div之前显示，因为你的div定位固定。固定位置元素独立于所有其他元素，不属于文档流程，并且与视图端口或浏览器窗口相关。 2.paragraph占用div的全宽是因为html中的P tag是块级元素，块级元素占用父级的全宽，不为任何其他元素留空间。

溶液： 1.如果你想在div下面的锚标签只是删除div的绝对位置 2.如果你想让p标签不占用div的全宽，只需将其设置为显示：inline-block

下面是建议的解决方案的工作示例

＆＃13;

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;
}

＆＃13;

<div>
  <p id="id1">Welcome to the group</p>
</div>

<a href="yahoo.com">Yureka</a>
</body>

＆＃13;

Answer 2

你需要为锚“a”标签提供以下css

a{ float: left; margin-top: 80px; }

您指定位置的DIV元素：fixed，margin-bottom属性不接受。

为什么锚元素不遵循div底部边距和div宽度不合适？

2 个答案: