css - 三个水平正方形|正方形| |正方形| |正方形|使用 CSS

Question

我试图使用

显示正方形(如元素符号正方形)

   .squares{
     list-style-type: square;
     display:inline;
    }

但我希望它们是水平的而不是垂直的元素符号正方形有什么办法可以得到 3 个正方形吗？

Answer 1

由于将列表项的显示设置为 inline 会导致它停止在元素符号前添加，因此您不能使用通常的 list-style-type 方法。

@Aibrean 通过使用 float 来内联元素来避免它。这有点难看(jsfiddle)，因为不同的布局规则适用于 floated 元素。这可以通过使用 clearfix 来解决。 , 但有一种更简单的方法可以做到这一点:

.squares > li{
 display: inline;
}

.squares > li:before{
 content: "\25A0  "; /* Square and space */
}

这会将内容添加到 css 中的每个 li 中。 254A 是 unicode encoding for a solid square

jsfiddle

---

如果你只想在你的内容中使用 3 个方 block ，你可能会发现直接在 html 中使用 html unicode 实体更容易:

■ ■ ■

http://jsfiddle.net/z1ye0or4/