CSS Display Inline 块不显示内联答案

【问题标题】：CSS Display Inline block is not displaying inlineCSS Display Inline 块不显示内联
【发布时间】：2020-06-11 21:57:26
【问题描述】：

我有下面的 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

【问题讨论】：

您的专栏中可能没有足够的空间让两者并排坐下。作为测试，从您的列div 中删除所有类，并且只包括col。像这样：<div class="col">
您的选择器不正确，应该是:.project.Type 而不是.project Type。 class="project Type" 这里有 2 个类，而不是一个类。 ||| .project Type 正在尝试在类 project 的父级中选择 Type 标记。

标签： html css angular forms bootstrap-4

【解决方案1】：

classes 名称中不能有空格，因为它会将其视为 css 中的嵌套类。因此，对于您的示例，您正在寻找具有 project 类的块内的元素 Type 在这种情况下，您可能想要使用 projectType 类，然后您的 css 应该是：

.projectType {
  display: inline;
}

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

【讨论】：

我没有空间..我在stackoverflow中发帖时遇到问题....它接受了空间

【解决方案2】：

CSS：

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

您可以参考这里了解更多信息： https://css-tricks.com/multiple-class-id-selectors/

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案4】：

使用display: flex;，建议使用不带空格的CSS类。

.projectType{ display: flex; }

【讨论】：

【解决方案5】：

.projectType{
    display: inline;
}

同时更改您的 html 类引用以匹配 class="projectType"

【讨论】：

两个名字都匹配....显示：内联也不行