CSS: установите ширину на ширину родительского элемента

#html #css

#HTML #css

Вопрос:

Я работаю с Angular mat-sidenav . Слева у меня есть навигация, а справа простой комментарий.

Место, которое мы видим Navigation , должно иметь отдельное background-color , как быстро нарисованное изображение здесь. Итак, чтобы быть на 100% ясным: мне нужен div класс with nav-title-container для заполнения родительской ширины.

Тем не менее, когда я пытаюсь это сделать, окрашиваются только несколько пикселей вокруг текста. Вероятно, потому, что я делаю это неправильно. Я также не очень хорошо знаком с css (прошло уже довольно много лет). Какие простые вещи я вижу над головой? Я предполагаю, что решение довольно простое, но я не могу найти его самостоятельно.

HTML

 <mat-sidenav-container>
    <mat-sidenav #sidenav mode='side' [(opened)]="opened">
       <div class="nav-title-container">
            <h4 class='nav-title'>Navigation</h4>
        </div>
       ....
</mat-sidenav-container>

CSS

 mat-sidenav {
    background-color: lightcoral;
    width: auto;
    padding-left: 5em;
    padding-right: 5em;
}

.nav-title{
    width: 100%;
    
}

.nav-title-container{
    width: max-content; /* I Presume this should be something else, already tried 100% */
    background-color: goldenrod;
    border-bottom: 0.2em solid wheat;
}

1. Пожалуйста, поясните, чего вы хотите. В электронном виде объясните вопрос, сэр

2. Я бы посоветовал вам изучить CSS Flexbox

3.Вы, вероятно, не можете получить полную ширину, потому padding-left что и padding-right у вас есть mat-sidenav . Лучше всего переместить это заполнение на дочерние элементы, если вам это нужно. Другой, но хакерский способ — добавить то же отрицательное поле, что и для заполнения .nav-title-container , например, margin-left: -5em; . И вы, вероятно, хотите установить .nav-title-container width значение 100% вместо max-content .

Ответ №1:

Вероятно, вы хотите сделать что-то подобное в своем css:

 mat-sidenav {
  background-color: lightcoral;
}

.nav-title {
  margin: 0;
  padding: 1.33em 5em;
  cursor: pointer;
}

.nav-title--highlighted {
  background-color: goldenrod;
  border-bottom: 0.2em solid wheat;
}

и это в вашем html:

     <mat-sidenav ...>
        <h4 class="nav-title nav-title--highlighted">Navigation</h4>
        <h4 class="nav-title">Statistics</h4>
    </mat-sidenav>

h4 будет иметь верхнее и нижнее поле 1,33, если вы не сбросите это margin: 0 значение. Это число отображается в заполнении, чтобы вы могли раскрасить фон заголовка. В общем случае вы хотите добавить отступ к элементу, который хотите видеть цветным, большую часть времени это самый внутренний компонент (в данном случае h4 ). Я добавил курсор, вы, вероятно, захотите, чтобы весь тег был доступен для просмотра позже.

Контейнеры были не нужны.

Попробуйте это на Stackblitz