Question

我有一个PHP输出，我试图与CSS对齐。内容的基本结构是我有2个父类别（文本），并且在这些子类别（图标）中。我无法修改PHP文件，它在一行中提供输出。我试图将刚刚列在彼此之下的父类别与他们的paren cat旁边的子猫联系起来。

我在尝试解决它时已经做了相当多的搜索但是理解主要解决方案是元素内容\ A和white-space：pre。但是，由于某种原因，这不起作用，文本未对齐（参见附件截图1）;删除\ A和空格属性会产生按照附加屏幕截图2的格式。

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

有人可以帮忙吗？

我真的很感激它！

非常感谢

enter image description here enter image description here

修改 HTML输出代码：

＆＃13;

<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>

＆＃13;

编辑2 enter image description here

编辑3 enter image description here

Answer 1

我认为float是一个很好的选择，因为你有标记。

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

要使用以“parentcategory ...”开头的类来定位元素，您可以使用*（通配符）选择器。

下面的小提琴和片段已经过简化演示。

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>

使用CSS

1 个答案: