围绕自定义li项目创建CSS边框

Question

我试图弄清楚是否有可能在我导入的图片中加入css边框作为我自己的自定义项目符号：

＆＃13;

＆＃13;

$names = array(); 
foreach ($my_array as $my_object) {
    $names[] = $my_object->name; //any object field
}

array_multisort($names, SORT_ASC, $my_array);

return $my_array;

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

嵌入式代码编辑器中的结果与我使用的图像的结果相同。

这是所需的输出：

有什么想法吗？我不幸的是，我可能不得不导入带有边框的图标，但我看到我是否可以在没有边框的情况下管理。

谢谢！

Answer 1

是的，这很容易，请看下面的例子。你只是搞砸了一些东西。

您的align-content代替align-items会导致行定位不正确。 text-indent导致错误的偏移。我删除了这些小问题。

关于图片本身 - 由于表情符号，我使用em作为示例，但对于图片，最好使用px并重新计算当前定义为{{1}的值}。

em

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;
}

Answer 2

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

1）使用带有圆形边框的图像作为＆＃34; li＆＃34;的背景​​。背景应该是不重复的左中心和一些填充左边的li。

2）给li：before。

提供高度，宽度，内嵌块和边界半径

Answer 3

您应该从ul＆gt;中删除“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;
}