how to put the text in the same line with the button

Issue

I’m trying to put the button on the same line as the text and yet,the button goes to the next line (see picture below).

Preview

My html and css (using bootstrap) is the following:

<a href="#" class="mx-1 text-muted" title="Impossible to
                                    {{ selected.blabla }}
                                    or whatever">
    <div class="m-sg-list-img__item d-inline">
        <svg class="svg-icon svg-circle-cross float-right" aria-hidden="true" focusable="false">
            <use xlink:href="{% static 'svg-icons/icon-sprite.svg' %}#circle-cross"></use>
        </svg>
    </div>
</a>

The d-inline on the 4th line, used on the div class allows to have everything in a block (or I guess). The float-right on the 5th line allows the svg button to go to the right. Yet, it goes to the next line as you can see in the picture.

I’ve tried to use a text-nowrap in the div class, to remove the next line, to no effect. I’ve also tried .justify-content-end and also .align-self-end and other bootstrap tricks found here, to no avail.

If you have any ideas, I’m all ears.

Solution

In your case, you need to change div tag to span tag

Here’s a simple example

<a>
Sample Text
<span>
<button>button(change this with your svg button)</button>
</span>
</a>

Answered By – Mike Tabag Estonanto

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.