Question

我在缺席后再次使用html / css，并让自己陷入困境。我构建了一个粘性页脚样式导航栏，并希望子链接是水平的。问题是父容器包含它们的宽度。我可以通过负左/右边距来克服这个问题，但是只要子链接的数量或大小发生变化，就需要进行更改。我考虑过只是把它变得很大但这似乎是一种草率的欺骗，当我接触到媒体查询时可能会成为一个问题。

我考虑过它的位置：绝对和浮动，但这些似乎也是错误的选择。

您认为正确的方法是什么？ FIDDLE

nav{
    height: 100px;
    margin-bottom: 50px;
    position: relative;
    width: 100%;
}

nav > ul > li > ul {
    margin: -150px -150px 0 -150px;
    line-height: 50px;
}

我放入负边距，粗略地看一下我在尝试的东西。

感谢。

Answer 1

I made some changes to your code. 
What do you think?

https://jsfiddle.net/bpq4vtgy/1/

Ok that's what you need:

nav > ul > li {
    float: left;
    position: relative;
    height: 100px;
    width: 25%;
    text-align: center;    
}

nav > ul > li > ul {
    position: absolute;
    width: 1000px;
    bottom: 100px;
    left: -20px;
    opacity: 0;
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
    -ms-transition: opacity .5s;
}

nav > ul > li > ul > li {
    display: block;
    float: left;
    padding: 0 10px;
    line-height: 50px;
    display: inline-block;
    background-color: #aff;
    border-left: 1px solid #ffffff;
}

nav > ul > li > ul > li:first-child {
    border-left: 0;
}

请参阅https://jsfiddle.net/kiroslim/6s57rkyu/1/！

Answer 2

昨晚做了一堆阅读，我发现我不能建立基于孩子的CSS计算，而只是兄弟姐妹。我确实设法使用JS获得了我想要的东西。

$(function centerSubMenue(){
    var subMenue = $('nav  ul  li  ul');
    //var subMenueItems = $('nav  ul  li  ul li');
    var width = 0;

    $(subMenue.children('li')).each(function() {
        width += $(this).outerWidth( true );
    });

    $(subMenue).css({'margin-left':width/(-2)});
    $(subMenue).css({'margin-right':width/(-2)});
});

我总是愿意学习更好的方法，所以如果我错了，请随时告诉我。

如何正确扩展超出父宽度？

2 个答案: