How to align button right using Semantic UI

Question

I need segment with text(inside <p> ), and button on next row on the right

I try next markup, but it seems not working properly( button overflow segment border):

<div class="ui container">
    <div class=" ui segment">
        <p> Some Text.</p>
        <button class="ui right floated primary button"> Some Action</button>
    </div>
</div>

How to do it, using semantic-ui framework?

Ball

have you tried defining the <p> as ui left floated? – Northcutt

Answer 1

I found an answer:

In addition to using right floated on the button, also change the segment class from ui segment to ui clearing segment.

Ball

'ui clearing segment' only changes the transparency of the segment, it does not make the segment right aligned as indicated in your original question. But 'ui right floated primary button' works. – Cassiopeia

@SaeedD. add this class to segment, not to button – Ball