Question

我有一个简单的<ul><li>列表type="square"。我想要做的就是让这个方形白色，但在正方形周围只有黑色边框。

原因是我的页面背景颜色为白色，方形不可见。

我确信这很容易，但无法弄明白。这是我到目前为止所尝试的内容

＆＃13;

ul li {
    color: white;
}
li::before {
  border: 1px solid black;
}
ul li span {
    color: black;
}

＆＃13;

<ul type="square">
    <li>
        <span>Item 1</span>
    </li>
    <li>
        <span>Item 2</span>
    </li>
</ul>

＆＃13;

正如您所看到的，广场并不可见。

Answer 1

而不是list-style-type使用Psuedo元素进行li并将其设置为方形并添加边框

＆＃13;

ul{
  list-style-type:none;
}

ul li {
   // color: white;
   position:relative ;
}
ul li::before {
       content: '';
    width: 10px;
    height: 10px;
    background: white;
    position: absolute;
    left: -20px;
    border: 1px solid #F00;
    top: 3px;
}
ul li span {
    color: black;
}

＆＃13;

<ul>
    <li>
        <span>Item 1</span>
    </li>
    <li>
        <span>Item 2</span>
    </li>
</ul>

＆＃13;

Answer 2

更改此

ul li {
    color: white;
}

用这个

ul li {
    color: black;
}

或任何颜色你需要的，只要颜色与背景不一样

Answer 3

您无法定位现有的列表项目项目符号点，但您可以修改之前的元素，以创建具有所需样式的新自定义项目符号。

不幸的是，我不知道要获得子弹点的位置，所以你必须选择一个对你来说好看的位置，使用左边的＆＃39;属性。

＆＃13;

ul li {
    color: white;
}
li::before {
  content: "";
  display: inline-block;
  position: relative;
  left: -18px;
  width: 5px;
  height: 5px;
  background: white;
  border: 1px solid black;
  vertical-align: middle;
}
ul li span {
    color: black;
}

＆＃13;

<ul type="square">
    <li>
        <span>Item 1</span>
    </li>
    <li>
        <span>Item 2</span>
    </li>
</ul>

＆＃13;

Answer 4

您可以在::before pseudoelement的content属性中使用unicode符号。请参阅UTF-8 Geometric Shapes以查找所需的符号并将该代码转换为HEX。对于您的情况，\20e3适合：

li {
    list-style-type: none;
   }
   li::before {
    content: "\20e3";
    margin: 0 1em 0 0;
   }

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

与css的ul广场附近的边界

4 个答案: