tips for aligning text and buttons on the same line

Is there a way to align the button with the text on the same line, instead of it dropping down (refer to the image below)?

https://i.sstatic.net/hQ3YC.png

This is my current html and css code (utilizing bootstrap):

<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 in the 4th line creates blocks for everything. The float-right in the 5th line positions the svg button to the right. However, it's still dropping below as seen in the picture.

I've attempted using text-nowrap in the div class to prevent the drop, but to no avail. I also tried .justify-content-end,.align-self-end, and other bootstrap methods fromhere, all unsuccessful.

If you have any suggestions or solutions, please let me know!

htmlcssbootstrap-4

Answer №1

For your situation, it is necessary to replace the div tag with a span tag

Let me provide you with a straightforward example

<a>
Example Text
<span>
<button>button(update this with your svg button)</button>
</span>
</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to incorporate color gradients into the corners of CSS cards

Below is an example of a basic bootstrap card: Example 1: https://i.stack.imgur.com/DK2Sz.png I attempted to draw blue and green colors side by side, but was only successful in drawing blue as shown below: Example 2: https://i.stack.imgur.com/CcSzP.png ...

htmlcsstwitter-bootstrapbootstrap-4

A hover effect in CSS that utilizes a psuedo element to overlay the primary element

When hovering, I want to achieve an effect that looks similar to the display below: To view my website, click here The relevant code is shown below with the !important attributes removed: .cta-button-menu, .cta-button-menu::before { transitio ...

htmlcsswordpress

What methods can I use to guarantee that a cloned HTML element retains a specific property during Unit Testing?

During my HTML cloning process, I am using the following code snippet: var clone = document.getElementById('tempID').cloneNode(true); After creating the clone, I need to modify its ID by assigning a new unique identifier with clone['id&apo ...

htmltypescriptunit-testingclone

Mobile page sliding mechanism

My website contains a div that is mostly off the page, but on hover it translates onto the main page. You can check out my website. However, this method doesn't work well on mobile devices. Hovering is not effective and I often have to click multipl ...

javascriptjquerycsshtml

What is the best way to expand a Modal in Bootstrap 4?

Initially, I am facing an issue with Object-Oriented Programming in javascript, and my understanding of it is quite limited. However, I urgently need to resolve this problem... Currently, I am attempting to utilize a library designed for Bootstrap 3 withi ...

javascriptooptwitter-bootstrap-3bootstrap-modalbootstrap-4

Shifting image position in Bootstrap row

Is there a way to align a picture with a sign 1 to the top of a red field using bootstrap without messing up the layout when changing the page size? https://i.sstatic.net/g86Pq.jpg <div class="container"> <div class="row p ...

htmlimagebootstrap-4

What is the best way to insert two rows directly in the middle of two Bootstrap columns?

I need to align two rows in a straight line. Similar to the example shown in the image below: https://i.sstatic.net/EwRat.png After that, I want to split the Bootstrap into two columns, one with col-md-8 and the other with col-md-4. In the col-md-8 col ...

htmlcsstwitter-bootstrap

take a paragraph element outside of a container div

In my ASP project, I have incorporated JavaScript and CSS code that I obtained from JonDesign's SmoothGallery demo website. Now, I am trying to move the p tag containing the summary out of the div. Here is the current code snippet: <div id="myGall ...

asp.netcss

implementing lazy loading for images within styled components

const UserBackgroundImage = styled.div` background: url(${(props) => props.backgroundImage}) no-repeat center center; } In my styling component, I have utilized a div for displaying background images. However, I am facing a flickering issue while wai ...

javascriptcssreactjsstyled-components

How can I efficiently verify page references using tools like CSS, JavaScript, and more?

I have Firebug (my team lacks Firefox) and the IE developer toolbar (IE7), but I'm struggling to easily validate if the referenced files in a page are loading. I see Javascript errors, but they don't lead me directly to the exact file in the hier ...

htmldebugging

Ways to display or conceal various divs by employing an if/else statement?

I am aiming to conditionally display various divs based on certain criteria: Show the "x" div if it's not already visible Display the "y" div only if the "x" div is already being displayed Show the "z" div only if both the "x" and "y" divs are alrea ...

javascripthtmlcss

How can I implement a Dynamic Input field using Angular?

Suppose there is an input field where a user enters an ID. Once the user clicks the "add" button, I need to send a request to my server to fetch a "name". Afterwards, I want to disable the text input field, hide the "add" button, and show a number input fi ...

javascripthtmlangularjsangular-ui

What is the best way to find information in a multi-page table?

I've implemented a table with pagination and search functionality to look up data within the table. However, currently the search only works within the current page of the table rather than searching the entire dataset. Is there a way to modify the se ...

javascripthtmlangular

Tips for Resizing google reCAPTCHA

The problem's image is shown below: https://i.sstatic.net/ph2EX.jpg Below is the code snippet related to the issue: <div class="text-xs-center" id="DIVCATCHA" runat="server"> <asp:HiddenField runat="server" ID="hdnImageSelected" /> ...

htmlcssasp.netrecaptcha

Issue encountered while trying to add information into MySQL

I am facing an issue with inserting data for two clients into a single table in MySql. The problem arises when trying to insert the details of the second client, and on subsequent attempts, neither set of data can be successfully added. MySql table: https: ...

phphtmlmysqldatabase

XSL fails to display HTML tables

I am having trouble displaying information from an XML file about hotels using XSL on a webpage without HTML tables. Despite searching through numerous posts on StackOverflow, I cannot seem to pinpoint where I may have gone wrong. Here is an excerpt from ...

htmlxmlxslt

Importing CSS files from node_modules in JavaScript modules can lead to CSS class names becoming "undefined" in the generated HTML

After successfully importing CSS/SCSS files into my React modules using Parcel, I encountered an issue when trying to import a CSS file from a node_modules package like bootstrap: import * as styles from 'bootstrap/dist/css/bootstrap.css'; .... ...

javascriptbootstrap-4node-modulesparceljs

What can be done to ensure that the a href tag is functioning as clickable?

Having an issue with my HTML and CSS code for a notification dropdown box. I am unable to click the tag, even after attempting to use JavaScript. Can't seem to figure out what's causing this problem. Any advice on how to make the tag clickable? ...

javascriptphpjqueryhtmlcss

Dynamic item addition feature activated by button on contact form

I am looking to create a form that includes the standard name, phone, email fields as well as a dropdown for selecting products and a text box for inputting quantity. The unique aspect is allowing users to add multiple products (dropdown and quantity textb ...

javascriptphpjqueryhtmlforms

Fixed Row Feature in Visual Composer

Currently, as I work on a website in Wordpress utilizing the Visual Composer page builder, I have encountered a dilemma. I am attempting to ensure a row remains sticky at the top of the page. In an effort to achieve this, I have inserted the following CSS ...

csssticky