Семантический пользовательский интерфейс: кнопка с выравниванием по правому краю/плавающая кнопка

Как правильно выровнять кнопку с помощью Semantic-UI справа? Я пробовал такие вещи, как:

            <div class="ui mini labeled input">
                <div class="ui label">Description</div>
                <input placeholder="Privat" type="text">
            </div>
            <div class="ui floated right red mini button">
                Remove
            </div>
            <br />

Но кнопка всегда находится под полем ввода. Не могли бы вы объяснить (в дополнение к правильному решению), почему это происходит? Обязательно ли использовать сетку?

Второй вопрос рядом с этим:

Два помеченных входа, например

            <div class="ui mini labeled input">
                <div class="ui label">description</div>
                <input placeholder="Privat" type="text">
            </div><br/>
            <div class="ui mini labeled input">
                <div class="ui label">another description</div>
                <input placeholder="Privat" type="text">
            </div>

Не имеют одинаковой длины. Ни серая метка, ни общее поле ввода. Это выравнивается?

jsfiddle тест

Заранее спасибо! :)


html css semantic-ui
person user2084865    schedule 22.03.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Элементы inline-flex (inline-block), поэтому приходится разбивать строки вручную с помощью <br />.

См.: https://jsfiddle.net/4p6d7x86/2/.

person Alex    schedule 22.03.2015
comment
Спасибо :) У меня странная проблема: мои элементы display: table, а не inline-flex. Сравнил класс jsfiddle с моим реальным кодом: .ui.labeled.input. У вас есть идея? - person user2084865; 22.03.2015
comment
В этом случае измените display дочернего элемента на table-cell. - person Alex; 22.03.2015
comment
Похоже, я не использовал текущую версию SemanticUI. После обновления все работает как положено. - person user2084865; 22.03.2015