Question

我想将此无序列表中的文本进一步移动到我的图形右侧，因此它们不会重叠。我该怎么做？

这是我的代码：

        .page p { line-height: 1.2em; }
        .page a { color: #1badd2; text-decoration: none; }
        .widget li  { 

            margin: 0;  
            padding: 2px 0px 8px 35px; 
            display: block; position: relative; 
            border-bottom: none;

            }



        .widget li:before {
            content: '';
            display: block;
            background: url(http://bryancollins.eu/wp/wp-content/uploads/2014/04/arrow.png) no-repeat 0 0;
            height: 12px; width: 30px;
            position: absolute; top: 6px; left: 0px;
            }

你可以在这里看到它：bryan.collins.eu/wp

Answer 1

您需要通过在li元素中添加填充来在左侧腾出空间。在li上声明的绝对定位：在选择器之前使它堆叠在li元素之上。

将此规则添加到此选择器：

.featured-box ul li {
  padding: 0 0 0 40px;
}

将箭头垂直居中一点：将顶部值更改为10px。

.widget li:before {
  top: 10px;
}

注意：您可以轻松地将其作为背景图片添加到li上，而不使用：before选择器。

.featured-box .widget li {
  list-style: none;
  background: url("http://bryancollins.eu/wp/wp-content/uploads/2014/04/arrow.png") no-repeat scroll 0 10px rgba(0, 0, 0, 0);
  display: block;
  margin: 0 0 0 30px;
  padding: 0 0 0 40px;
}

无序列表中的文本和图像重叠

1 个答案: