Semantic UI floats

Question

Semantic UI newbie здесь, я не мог найти нигде в документах, как (если это возможно) плавать простой элемент, не имея при этом что-то другое (например, кнопку или сегмент).

Например, у меня есть в нижней части страницы шаг навигации/счетчик, который записывается следующим образом:

<div class="row three column"> 
    <div class="column"> 
     <br> 
     <p class="ui left floated compact basic segment stepper">Step 2 of 3</p> 
     <a class="ui right floated compact basic segment stepper">Go back</a> 
    </div> 
</div> 

Помимо того, что having to place a <br> до плавающих элементов выглядит своего рода странно для меня, ISN» Можно ли просто добавлять классы, такие как left floated, и есть ли что-то наподобие? Как и в случае с bootstrap с pull-left ...

Если я хорошо понимаю, сегмент предназначен для группировки связанного содержимого (соответствующий семантически для тега HTML5 <section>). Поэтому в таких ситуациях кажется немного излишним - если не семантически неправильно - использовать segment s.

Answer 1

В настоящее время нет глобальных утилит, таких как pull-left в бутстрапе. Когда right float, например, определен в коде SUI, он всегда связан с элементом, таким как кнопка, сегмент, список и т. Д.

Вы можете просто определить свою собственную глобальную утилиту, без необходимости «переполнять», с любыми элементами SUI:

div [class*="left floated"] { 
    float: left; 
    margin-left: 0.25em; 
} 

div [class*="right floated"] { 
    float: right; 
    margin-right: 0.25em; 
} 

Хотя для вашей ситуации кнопка значка может быть семантически подходит для обоих элементов.