CSS Display Inline 塊不顯示內聯

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 中的嵌套類。 因此，對於您的示例，在具有類project的塊中查找元素Type在這種情況下，您可能希望使用projectType類，然后您的 css 應該是：

.projectType {
  display: inline;
}

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

Answer 2

CSS：

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

您可以參考此處了解更多信息： https : //css-tricks.com/multiple-class-id-selectors/

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

使用display: flex; 並且建議使用沒有空格的 CSS 類。

.projectType{ display: flex; }

Answer 5

.projectType{
    display: inline;
}

還要更改您的 html 類引用以匹配class="projectType"