html - 相对位置菜单

Question

我有这个代码

.bloc {
    width: 40%;
    margin:0 auto;
    background: lightblue;
    text-align:center
}

.bloc ul {
    list-style-type: none;
    position: relative;
    top: 15px;
    text-align: center;
    margin:0;
    padding:0;
}

<div class="bloc">
<a href="#">A link</a>
<ul>
    <li><a href="#">Sublink</a></li>
    <li><a href="#">Sublink</a></li>
</ul>    
</div>

我希望 ul 位于 div .bloc 之外，并且 div .bloc 调整其高度。

我尝试定位它但是.bloc的高度不调整第一个链接

我希望我是明确的。

感谢您的帮助!

Answer 1

在 ul

上使用 padding-top: 15px; 而不是 top: 15px;

.bloc {
    width: 40%;
    margin:0 auto;
    background: lightblue;
    text-align:center
}

.bloc ul {
    list-style-type: none;
    position: relative;
    text-align: center;
    margin:0;
    padding:0;
    padding-top: 15px;
}

<div class="bloc">
<a href="#">A link</a>
<ul>
    <li><a href="#">Sublink</a></li>
    <li><a href="#">Sublink</a></li>
</ul>    
</div>