三个水平方格|方形| |广场| |广场|用css

Question

我试图使用

显示正方形（如子弹方块）

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

但是我希望它们水平而不是垂直的子弹方块我有什么方法可以获得3个方格吗？

Answer 1

使用list item元素水平对齐。

 ul.squares{
     list-style-type:square;      
 }

 .squares li {
     float:left;
     margin-right:10px;
 }

现在适当地使用该课程：

<ul class="squares">
  <li></li>
  <li></li>
  <li></li>
<ul>

请参阅小提琴：http://jsfiddle.net/7t82L1dh/

Answer 2

由于将列表项的显示设置为inline会导致其停止预设项目符号，因此您无法使用通常的list-style-type方法。

@Aibrean通过使用float来内联项目来避免它。这有点难看（jsfiddle），因为不同的布局规则适用于float ed元素。这可以通过使用clearfix来解决，但这样做更容易：

.squares > li{
 display: inline;
}

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

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

jsfiddle

---

如果您只想在内容中使用3个正方形，您可能会发现直接在html中使用html unicode实体进行正方形更容易：

■ ■ ■

http://jsfiddle.net/z1ye0or4/