css - 使用 CSS 在换行后对齐文本

Question

我有一个 PHP 输出，我试图使其与 CSS 保持一致。内容的基本结构是我有 2 个父类别(文本)和这些子类别(图标)。我无法修改在一行中提供输出的 PHP 文件。我正在尝试让父类别在彼此下方列出，子猫在它们的父猫旁边。

为了解决这个问题，我已经做了很多搜索，但我知道主要的解决方案是元素内容\A 和 white-space: pre。但是，由于某种原因，这不起作用，文本会错位(请参阅随附的屏幕截图 1)；删除\A 和 white-space 属性会导致格式如所附屏幕截图 2 所示。

我目前正在使用以下代码:

.more_info {
    float: left !important;
}

[class*="parentcategory"] {
  clear: both !important;
}

.parentcategory1 {
  float: left;
  display: inline;
  clear:none !important;
  margin: 0;
  text-align: center;
  visibility: hidden;
}
.parentcategory1::before {
  content: 'Parent Cat 1:';
  visibility: visible;
}

.parentcategory2 {
  float: left;
  display: inline;
  clear:none !important;
  margin: 0;
  text-align: center;
  visibility: hidden;
}
.parentcategory2::before {
  content: 'Parent Cat 2:';
  visibility: visible;

}
.subcategory1a {
  float: left;
  display: inline;
  clear:none !important;
  margin: 0;
  width: 1.75vh;
  color: transparent;
}

.subcategory1b {
  float: left;
  display: inline;
  clear:none !important;
  margin: 0;
  width: 1.75vh;
  color: transparent;
}
.subcategory1c {
  float: left;
  display: inline;
  clear:none !important;
  margin: 0;
  width: 1.75vh;
  color: transparent;
}

.subcategory2a {
  float: left;
  display: inline;
  clear:none !important;
  margin: 0;
  width: 1.75vh;
  color: transparent;
}

<div class="more_info   parentcategory1" style="clear:both;">
<span class="checkbox" style=""></span>Yes
</div>

<div class="more_info   subcategory1a" style="clear:both;">
<span class="checkbox" style=" background: url(http://localhost/mg/wp-content/uploads/2017/12/openinghours.png) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>Yes
</div>

<div class="more_info   subcategory1b" style="clear:both;">
<span class="checkbox" style=" background: url(http://localhost/mg/wp-content/uploads/2018/01/kompass.png) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>Yes
</div>

<div class="more_info   subcategory1c" style="clear:both;">
<span class="checkbox" style=" background: url(http://localhost/mg/wp-content/uploads/2017/12/membership-fee.png) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>Yes
</div>

<div class="more_info   parentcategory2" style="clear:both;">
<span class="checkbox" style=""></span>Yes
</div>

<div class="more_info   subcategory2a" style="clear:both;"><span class="checkbox" style=" background: url(http://localhost/mg/wp-content/uploads/2017/12/openinghours.png) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>Yes
</div>

有人可以帮忙吗？

我真的很感激!

非常感谢

enter image description here enter image description here

编辑 HTML 输出代码:

<div class="more_info   parentcategory1" style="clear:both;">
<span class="checkbox" style=""></span>Yes
</div>

<div class="more_info   subcategory1a" style="clear:both;">
<span class="checkbox" style=" background: url(http://localhost/mg/wp-content/uploads/2017/12/openinghours.png) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>Yes
</div>

<div class="more_info   subcategory1b" style="clear:both;">
<span class="checkbox" style=" background: url(http://localhost/mg/wp-content/uploads/2018/01/kompass.png) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>Yes
</div>

<div class="more_info   subcategory1c" style="clear:both;">
<span class="checkbox" style=" background: url(http://localhost/mg/wp-content/uploads/2017/12/membership-fee.png) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>Yes
</div>

<div class="more_info   parentcategory2" style="clear:both;">
<span class="checkbox" style=""></span>Yes
</div>

<div class="more_info   subcategory2a" style="clear:both;"><span class="checkbox" style=" background: url(http://localhost/mg/wp-content/uploads/2017/12/openinghours.png) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>Yes
</div>

编辑 2 enter image description here

编辑 3 enter image description here

Answer 1

鉴于您的标记，我认为 float 是一个不错的选择。

您可以将 float 属性应用于每个元素 (.more_info)，然后将 clear 属性应用于每个父类别。

要定位具有以“parentcategory...”开头的类的元素，您可以使用*(通配符)选择器。

下面的 Fiddle 和代码片段已针对演示进行了简化。

fiddle

.parentcategory1::before {
  content: 'Parent Cat 1:';
}

.parentcategory2::before {
  content: 'Parent Cat 2:';
}

.more_info {
  float: left;
}

[class*="parentcategory"] {
  clear: both;
}

<div class="more_info parentcategory1">
  <span class="checkbox" style=""></span>
</div>

<div class="more_info subcategory1a">
  <span class="checkbox" style=" background: url(https://unsplash.it/18) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>
</div>

<div class="more_info subcategory1b">
  <span class="checkbox" style=" background: url(https://unsplash.it/18) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>
</div>

<div class="more_info subcategory1c">
  <span class="checkbox" style=" background: url(https://unsplash.it/18) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>
</div>

<div class="more_info parentcategory2">
  <span class="checkbox" style=""></span>
</div>

<div class="more_info subcategory2a"><span class="checkbox" style=" background: url(https://unsplash.it/18) no-repeat left center;background-size:18px 18px;padding-left: 21px;"></span>
</div>