display:inline-flex 的替代品

Question

我只是用谷歌搜索了一下，发现 display:inline-flex 并不兼容所有浏览器。我想就我下面的 css 征求专家建议：

.badge {
background-color: #B12704 !important;
margin: auto;
font-size: 12px !important;
line-height: 24px !important;
padding-left: 10px;
padding-right: 10px;
} 

.label {
    position: relative;
    z-index: 1;
    float: left;
}

.label-text {
    color: #ffffff !important;
}

.container {
    display: inline-flex;  /* this is not comptabile with all browsers */

}

.description-text {
    padding-left: 10px;
    margin: auto;
    color: #111;
}

基本上，我有一个徽章和徽章旁边的一些文字。这是HTML部分

    <div class = "container">
<span class="badge">
    <span class="label">
         <span class="label-text">
                This is text on the badge
        </span>
    </span>
</span>
<span class="description-text">
<p>This is text beside the badge</p>
</span>
</div>

Answer 1

我认为您可以简化 HTML 标记并简单地使用 display: flex;（请注意，除非您另外指定，否则容器将占用整个宽度）

.container {
  display: flex; 
  justify-content: flex-start;
  align-items: center;
}

.badge {
  background-color: #B12704 !important;
  font-size: 12px !important;
  line-height: 24px !important;
  padding-left: 10px;
  padding-right: 10px;
  color: #ffffff !important;
}


.description-text {
  padding-left: 10px;
  color: #111;
}

<div class="container">
  <p class="badge">
    This is text on the badge
  </p>
  <p class="description-text">
    This is text beside the badge
  </p>
</div>

如果你不需要 flexbox 你可以使用 display: inline-block;

.container p {
  display: inline-block;
}

.badge {
  background-color: #B12704 !important;
  font-size: 12px !important;
  line-height: 24px !important;
  padding-left: 10px;
  padding-right: 10px;
  color: #ffffff !important;
}

.description-text {
  padding-left: 10px;
  color: #111;
}

<div class="container">
  <p class="badge">
    This is text on the badge
  </p>
  <p class="description-text">
    This is text beside the badge
  </p>
</div>

如果您无法更改标记，则：

.label-text {
  background-color: #B12704 !important;
  margin: auto;
  font-size: 12px !important;
  line-height: 24px !important;
  padding-left: 10px;
  padding-right: 10px;
  color: #ffffff !important;
}

.badge,
.label,
.description-text,
.label-text {
  display: inline-block;
}

.description-text {
  padding-left: 10px;
  margin: auto;
  color: #111;
  vertical-align: middle;
}

<div class = "container">
<span class="badge">
    <span class="label">
         <span class="label-text">
                This is text on the badge
        </span>
    </span>
</span>
<span class="description-text">
<p>This is text beside the badge</p>
</span>
</div>

display:inline-flex 的替代品

Alternative to display:inline-flex

html

css

display