cssalignmentsemantic-uiright-align

How to align button right using Semantic UI

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?

Solution

  • 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.