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>

enter image description here

​

​

Answer 1

类的名称中不能有空格，因为它会将其视为css中的嵌套类。因此，对于您的示例是在具有类project的块中查找元素Type，在本例中，您可能希望使用projectType类，然后您的css应该是：

.projectType {
  display: inline;
}

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

Answer 2

CSS：

.project.Type {显示:行内块；}

你可以在这里获得更多信息：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 display utilities。

如果您没有使用Bootstrap，您可以编写以下css代码：

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