три горизонтальных квадрата | квадрат | | Площадь | | Площадь | Использование CSS

Question

Я пытался отобразить квадраты (как пуля квадраты) с помощью

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

, но я хочу их горизонтально, а не вертикальные пулевые квадраты Есть ли способ, я мог бы получить 3 квадрат?

Answer 1

Поскольку установка отображения элемента списка в inline заставляет его остановить предваряя пули, вы не можете используйте обычный метод list-style-type.

@Aibrean избегал этого, используя float, чтобы встроить элементы. Это становится немного уродливым (jsfiddle), потому что различные правила размещения применяются к float ed элементам. Это может быть решена с помощью clearfix, но есть более простой Mothod сделать это:

.squares > li{ 
display: inline; 
} 

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

Это предваряется содержание каждой li в CSS. 254A является unicode encoding for a solid square

jsfiddle

---

Если вы просто хотите, 3 квадрата в вас контент, вы можете найти его проще всего с помощью Юникода сущностей HTML для квадратов непосредственно в HTML:

■ ■ ■ 

http://jsfiddle.net/z1ye0or4/

Answer 2

Используйте элемент элемента списка для выравнивания по горизонтали.

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/