Question

我有这段代码

＆＃13;

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

＆＃13;

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

＆＃13;

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

我尝试position relative但.bloc的高度不会随第一个链接调整

我希望我能说清楚。

感谢您的帮助！

Answer 1

在padding-top: 15px;

上使用top: 15px;代替ul

.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>

Answer 2

要使UL显示在.bloc之外，您可以将transform: translateX(100%)添加到.bloc ul规则中。这将使UL 100％（相对于UL的宽度）在X轴上向右移动。

Answer 3

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

正在为我工作，我刚试过它。顺便说一句，您创建的内容并不是制作导航栏的最佳方式，因为当您关闭页面位置时它会崩溃。相反，ul会更好：

 float:right;
 display:block;
 position:inline-block;

Answer 4

如果你做父母职位：亲属;和孩子的位置：绝对;然后你可以强制孩子拥有相同的宽度，但是将它推到div之外而不影响它的显示尺寸。

＆＃13;

.bloc {
    width: 40%;
    margin:0 auto;
    background: lightblue;
    text-align:center;
    position: relative;
}

.bloc > ul {
    list-style-type: none;
    position: absolute;
    margin: 0 auto;
    width: 100%;
    top: 20px;
    text-align: center;
    margin:0;
    padding:0;
}

＆＃13;

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

＆＃13;

相对位置的菜单

4 个答案: