Как правильно расширить родительскую ширину?

#html #css

#HTML #css

Вопрос:

Я снова играю с html / css после отсутствия и застрял. Я создал панель навигации в стиле нижнего колонтитула и хочу, чтобы вложенные ссылки были горизонтальными. Проблема в том, что родительский контейнер содержит их ширину. Я могу преодолеть это с отрицательными полями влево / вправо, но это потребует изменения в любое время, когда изменяется количество или размер вложенных ссылок. Я думал о том, чтобы просто сделать его огромным, но это похоже на неаккуратный обман и может стать проблемой, когда я перейду к медиа-запросам.

Я подумал о том, чтобы сделать его position: absolute и float, но они также кажутся неправильным выбором.

Как вы считаете, правильный способ сделать это? СКРИПКА

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

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

Я вставил отрицательные поля, чтобы показать примерный взгляд на то, что я пытался.

Спасибо.

1. [ jsfiddle.net/tjbaezid/68aouqpy ] вы ищете что — то похожее на это ??

2. Или как этот jsfiddle.net/m2h2jvz0/1

3. @DaniP хороший эффект.

4. Я понял, что мне нужно обновить адрес для fiddle для изменений, которые я внес до публикации здесь. Извините, я тоже новичок в fiddle. Взгляд, к которому я стремлюсь, находится здесь jsfiddle.net/pyromaniac511/m2h2jvz0/4

5. если в вопросе указан неправильный адрес, вы можете отредактировать его и исправить. прямо сейчас неясно, с какой проблемой вы столкнулись.

Ответ №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 /!

1. Стиль выглядит красиво, но я еще даже не добрался до этого, я просто пытался сделать все так, как я задумал. Я понял, что перепутал адрес скрипки, и у него не было правильной ревизии. Я обновил это. Правильный jsfiddle.net/pyromaniac511/m2h2jvz0/4

2. Обратите внимание, что дочерний <UL> имеет ширину 1000 пикселей! Убедитесь, что вы указываете ширину элемента, которую вы не будете превышать своими элементами <LI> . Надеюсь, это поможет.

Ответ №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)});
});

Я всегда открыт для изучения лучших способов, поэтому, если я ошибаюсь, не стесняйтесь сказать мне.