CSS Display Inline block is not displaying inline

Question

I have below html and CSS where i want the dropdown to be inline but its not displaying inline.

.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>

enter image description here

Answer 1

classes can't have spaces in its name, because it will consider it as a nested class in the css. So, for your example is looking for an element Type inside a block with a class project In this case you may want to use projectType class and then your css should be:

.projectType {
  display: inline;
}

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

Answer 2

CSS:

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

You may refer here for more info: https://css-tricks.com/multiple-class-id-selectors/

Answer 3

In css declaration, class name must not be seperated words, just like your javascript variable name.

If you are using Bootstrap, you can just the proper class name in html as below, no need to write style code.

<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>

Reference Bootstrap display utilities .

If you are not using Bootstrap, you can write below css code:

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

Answer 4

Use display: flex; and it is recommended to use CSS classes without spaces.

.projectType{ display: flex; }

Answer 5

.projectType{
    display: inline;
}

Also change your html class reference to match class="projectType"