Блог

Главная - Вопросы по программированию - запретить наследование родительской ширины дочерним элементом html

запретить наследование родительской ширины дочерним элементом html

#html #css

#HTML #css

Вопрос:

У меня есть контейнер для формы с max-width: 500px propery. Внутри этого контейнера у меня есть элемент span, который наследует родительскую ширину. Есть ли способ предотвратить это? Я пытался использовать position: absolute; , и это решило проблему ширины, но элементы HTML перекрываются.

  <div class="form-container">

        <div class="select"> 
          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
          <mat-select>
            <mat-option value="one">First option</mat-option>
            <mat-option value="two">Second option</mat-option>
          </mat-select>
        </div>
....... 
  </div>

.form-container {
   max-width: 500px
}

.select {
   position: absolute;
}

Комментарии:

1. Привет!!! Вы упомянули об элементе span в div контейнера. Но в вашем фрагменте есть элемент select внутри контейнера div 🙂 Пожалуйста, поделитесь правильным фрагментом. Также max-widht: 500px здесь должно быть max-width:500px; . Это опечатка 🙂

2. @ImranRafiqRather, спасибо, я внес изменения.

Ответ №1:

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

Но вы можете применить display: inline-block; (или display: block; ) к нему, а затем задать для него ширину:

 .form-container {
  max-width: 500px
}


.select span {
  display: inline-block;
  width: 300px;
} 
 <div class="form-container">

  <div class="select">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
    <mat-select>
      <mat-option value="one">First option</mat-option>
      <mat-option value="two">Second option</mat-option>
    </mat-select>
  </div>
  .......
</div>

Ответ №2:

Элемент span никогда не унаследует родительскую ширину (сам по себе), если вы не использовали для него какие-либо другие свойства CSS. Это не может произойти внезапно 🙂

Или, возможно, ваш родительский элемент является гибким контейнером, который вы использовали flex:1; для дочернего элемента. В этом случае дочерние элементы будут растягиваться 🙂

Метки: