Woocommerce：产品类别小部件答案

【问题标题】：Woocommerce: Product Category WidgetWoocommerce：产品类别小部件
【发布时间】：2021-04-19 13:20:58
【问题描述】：

我正在使用 Wordpress 开发我的网站、Woocommerce 插件和 Savoy 主题。

我已经处理这个问题有一段时间了，所以非常感谢您的帮助。

我正在使用基本的产品类别小部件，用于显示类别层次结构，以便在类别之间移动。无论如何，在每个类别上：在我添加白色圆圈之前；使用下面的代码。

 ul.children .cat-item > a::before{
 content: '';
 display: inline-block;
 width: 17px;
 height: 17px;
 -moz-border-radius: 7.5px;
 -webkit-border-radius: 7.5px;
 border-radius: 7.5px;
 background-color: white;
 margin-right: 9px;
 margin-bottom:-1px;
 cursor: pointer;
 }

问题是，文字在圆圈下面，像这样 --> enter image description here;

我想要的是让圆圈和文本对齐，在一列中，圆圈下没有文本，像这样 --> enter image description here

如果有人能解决我的问题，我将非常感谢您的帮助！

【问题讨论】：

标签： css wordpress woocommerce css-selectors wordpress-theming

【解决方案1】：

看看这是不是你想要的。

ul {
  list-style: none;
}

li {
  width: 80px;
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}

ul li::before{
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 17px;
   height: 17px;
   -moz-border-radius: 7.5px;
   -webkit-border-radius: 7.5px;
   border-radius: 7.5px;
   background-color: red;
   margin-right: 9px;
   margin-bottom:-1px;
   cursor: pointer;
 }

<ul>
  <li>Test</li>
  <li>Very long text</li>
 </ul>

【讨论】：