CSS Показать встроенный блок не отображает встроенный

Question

У меня ниже html и CSS, где я хочу, чтобы раскрывающийся список был встроенным, но он не отображался встроенным.

.project Type{
    display: inline-block;
}

<form class="smart-form">
  <div class="row">
    <div class="col col-sm-6 col-md-2 col-lg-2">
      <label class="project Type" >Project Type</label>
      <label class="project Type" >
        <select type="text" class="padding-5">
          <option *ngFor="let t of epmodel.ProjectType" value="{{t.id}}">{{t.type}}</option>
        </select>
      </label>
    </div>
  </div>
</form>

введите описание изображения здесь

Answer 1

Классы

не могут иметь пробелов в своем имени, потому что они будут считать его вложенным классом в css. Итак, для вашего примера ищем элемент Type внутри блока с классом project В этом случае вы можете использовать класс projectType, и тогда ваш css должен быть:

.projectType {
  display: inline;
}

<label class="projectType">...</label>

Answer 2

Используйте display: flex; и рекомендуется использовать CSS классы без пробелов.

.projectType{ display: flex; }

Answer 3

В объявлении css имя класса не должно быть разделенными словами, точно так же как ваше имя переменной javascript.

Если вы используете Bootstrap, вы можете просто указать правильное имя класса в html как показано ниже, не нужно писать код стиля.

<form class="smart-form">
  <div class="row">
    <div class="col col-sm-6 col-md-2 col-lg-2">
      <label class="d-inline" >Project Type</label>
      <label class="d-inline" >
        <select type="text" class="padding-5">
          <option *ngFor="let t of epmodel.ProjectType" value="{{t.id}}">{{t.type}}</option>
        </select>
      </label>
    </div>
  </div>
</form>

Справочник Bootstrap утилиты отображения .

Если вы не используете Bootstrap, вы можете напишите ниже css код:

.d-inline {
  display: inline-block;
}

Answer 4

CSS:

.project.Type {display: inline-block; }

Более подробную информацию вы можете получить здесь: https://css-tricks.com/multiple-class-id-selectors/

Answer 5

.projectType{
    display: inline;
}

Также измените ссылку на класс html для соответствия class="projectType"