Woocommerce：产品类别小部件

Question

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

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

我正在使用基本的产品类别小部件，用于显示类别层次结构，以便于在类别之间移动。无论如何，在每个类别上 :before I added white circles;使用下面的代码。

 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

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

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

Woocommerce：产品类别小部件

Woocommerce: Product Category Widget

css

wordpress

wordpress-theming

css-selectors

woocommerce