three horizontal squares |square| |square| |square| using css

Question

I was trying to display the squares (like bullet squares)using

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

but I want them horizontally instead of vertical bullet squares Is there any way I could get 3 squares?

Answer 1

Use the list item element to align horizontally.

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

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

Now use the class appropriately:

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

See fiddle: http://jsfiddle.net/7t82L1dh/

Answer 2

Since setting the display of a list item to inline causes it to stop prepending the bullets, you can't use the usual list-style-type method.

@Aibrean avoided it by using float to inline the items. This gets a bit ugly (jsfiddle), because different layout rules apply to floated elements. This can be solved by using clearfix, but there's an easier mothod of doing this:

.squares > li{
 display: inline;
}

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

This prepends content to each li in css. 254A is the unicode encoding for a solid square

jsfiddle

---

If you just want 3 squares in you content, you may find it easier just using the html unicode entities for squares directly in html:

■ ■ ■

http://jsfiddle.net/z1ye0or4/