在自定义 li 项目符号周围创建 CSS 边框

Question

我想弄清楚是否可以在我作为我的 li 的自定义项目符号导入的图像周围加入 css 边框：

ul {
  list-style: none;
  margin-right: 0;
  padding-left: 0;
  list-style-position: inside;
}

ul > li {
  align-content: center;
  display: flex;
  margin: 5px 0;
  padding-left: 1em;
  text-indent: -1em;
}

ul li:before {
  /* I'm a different image but found a similar 
   sized one online for demonstration 
   purposes seen below */
   
  content: url("https://www.dicentral.com/css/assets/imgs/Flag_Nation_france.png");
  border: 1px solid grey;
}

<ul>
   <li>Get to know the business</li>
   <li>Get to know people (stakeholders, key players, cross-functional partners, etc.)</li>
   <li>Learn how the team's priorities impact our mission</li>
   <li>Get to know your projects, the team's projects, who's involved, and your onboarding goals</li>
</ul>

嵌入式代码编辑器中的结果反映了我正在使用的图像。

这是所需的输出：

有什么想法吗？不幸的是，我在想我可能必须导入带边框的图标，但我正在看看是否可以不带边框。

谢谢！

Answer 1

您应该从 ul > li

中删除 "display:flex"

ul {
  list-style: none;
  margin-right: 0;
  padding-left: 0;
}

ul > li {
    align-items: center;
    display: flex;
    margin: 5px 0;

}

ul li:before {
  /* I'm using the url method to fetch an icon, but 
   inserted a emoji for demonstration 
   purposes seen below */

  content: '';


 border: 1px solid #808080;
    border-radius: 100%;
    width: 1em;
    height: 1em;
    display: inline-block;
    padding: 0.25em;
    line-height: 1.0;
    margin-right: 0.5em;
}

Answer 2

是的，这很容易做到，请看下面的例子。你只是把事情搞砸了一点。

您使用 align-content 而不是 align-items，这使得行定位不正确。 text-indent 导致不正确的偏移量。我已经删除了这些小问题。

关于图像本身 - 由于表情符号，我使用 em 作为示例，但对于图像，最好使用 px 并重新计算当前定义为 [= 的值15=].

ul {
    margin-right: 0;
    padding-left: 0;
    list-style: none;
}

ul > li {
    align-items: center;
    display: flex;
    margin: 5px 0;
}

ul li:before {
    /* I'm using the url method to fetch an icon, but 
     inserted a emoji for demonstration 
     purposes seen below */

    /*content: url("path/to/icon");*/
    content: '';
    border: 1px solid #808080;
    border-radius: 100%;
    width: 1em;
    height: 1em;
    display: inline-block;
    padding: 0.25em;
    line-height: 1.0;
    margin-right: 0.5em;
}

<ul>
    <li>Get to know the business</li>
    <li>Get to know people (stakeholders, key players, cross-functional partners, etc.)</li>
    <li>Learn how the team's priorities impact our mission</li>
    <li>Get to know your projects, the team's projects, who's involved, and your onboarding goals</li>
</ul>

Answer 3

有很多方法可以达到效果。

1) 在 "li" 上使用带有圆角边框的图像作为背景。背景应该是无重复的左中心和一些 padding-left on li.

2) 将高度、宽度、内联块和边框半径赋予 li:before。

在自定义 li 项目符号周围创建 CSS 边框

Creating a CSS border around custom li bullet

html

css

border

html-lists