Question

我有以下列表，是我加载了一些SVG作为列表项。如何将::before的高度和宽度设置为例如30px x 30px？我已经尝试直接将其设置为高度和宽度，但是失败了。有人可以帮我吗？

<div class="list-div">
<ul class="items-list">
          <li>Dies ist ein Eintrag A</li>
          <li>Dies ist ein Eintrag B</li>
          <li>Dies ist ein Eintrag C</li>
          <li>Dies ist ein Eintrag D</li>
</ul>
</div>

和CSS：

.list-div li {
    opacity:0;
  position: relative;
  display: block;
  margin-bottom: 5px;
  padding: 10px;
  text-align: left;
  visibility: hidden;
  text-transform: uppercase;
}
  .list-div li:nth-child(1){
background: url(some_image.svg);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;
}
.list-div li:nth-child(2){
background: url(some_image.svg);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;

}
.list-div li:nth-child(3){
background: url(some_image.svg);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;

}

.list-div li:nth-child(4){
background: url(some_image.svg);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;
}

Answer 1

看看这个：

.list-div li {
  display: block;
  margin-bottom: 5px;
  padding: 10px;
  text-transform: uppercase;
}

.list-div li span {
  line-height: 30px;
  height: 30px;
  vertical-align: top;
}

.list-div li:before {
  content: '';
  width: 30px;
  height: 30px;
  display: inline-block;
  margin-right: 10px;
  background-size: cover;
}

.list-div li:nth-child(1):before {
  background-image: url('https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png');
}
.list-div li:nth-child(2):before {
  background-image: url('https://cdn1.iconfinder.com/data/icons/picons-social/57/stackoverflow-512.png');
}
.list-div li:nth-child(3):before {
  background-image: url('https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/home-512.png');
}
.list-div li:nth-child(4):before {
  background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-512.png');
}

<div class="list-div">
  <ul class="items-list">
    <li><span>Dies ist ein Eintrag A</span></li>
    <li><span>Dies ist ein Eintrag B</span></li>
    <li><span>Dies ist ein Eintrag C</span></li>
    <li><span>Dies ist ein Eintrag D</span></li>
  </ul>
</div>

这使用了:before选择器和列表项的想法来显示自己的图标。在此选择器中定义content是很重要的，即使它为空，也将不起作用。图标的大小设置为30x30px，位于文本的中间。我还添加了一个background-size: cover标签，以便将图标设置为您定义的大小，这意味着如果您决定稍后缩放图标，它们将同样起作用。

为了使文本与图标居中对齐，我将每个文本项都包裹在<span>标记中，该标记使我们可以仅修改文本而不影响列表项本身或:before选择器。在这里，我们只需将文本的line-height和height设置为与图像相同的高度。如果要调整图像的大小，则还需要在此处更改值。

由于您正在重用许多不需要重用的代码，因此我也对您的代码进行了少量修改。例如，您的:nth-child(x)选择器使用的是完全相同的代码，只有一个区别-背景图像。为了提高效率，我将所有默认代码放入一个代码块中，这将以与以前相同的方式影响所有列表项。由于背景图片将是列表的唯一更改，因此最好将它们作为单独的链接。

CSS在li :: before中设置SVG的高度和宽度

1 个答案: