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?

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

m_callens
– m_callens

2016-06-24 19:22:34 +00:00
Commented Jun 24, 2016 at 19:22 — m_callens
– m_callens, Commented Jun 24, 2016 at 19:22

pbarney · Accepted Answer · 2021-10-25 21:34:42Z

22

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.

edited Oct 25, 2021 at 21:34

pbarney

2,9634 gold badges41 silver badges55 bronze badges

answered Jun 22, 2016 at 11:32

Andrey Ischencko

7901 gold badge6 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Saeed D. Over a year ago

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

Andrey Ischencko Over a year ago

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

Collectives™ on Stack Overflow

How to align button right using Semantic UI

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related