How can I display a button (hyperlink) on a new line using CSS or jQuery?

I am looking to create a new line after the last input of my form. On this new line, I want to add a "remove-link".

This is my HTML:

<div class="subform dynamic-form">

<label for="id_delivery_set-0-price">

    Price:

</label>
<input id="id_delivery_set-0-price" type="number" step="0.01" name="delivery_set-0-price"></input>
<label for="id_delivery_set-0-amount">

    Amount:

</label>
<input id="id_delivery_set-0-amount" type="number" name="delivery_set-0-amount" min="0"></input>
<label for="id_delivery_set-0-humidity" style="display: none;">

    Humidity:

</label>
<input id="id_delivery_set-0-humidity" type="number" name="delivery_set-0-humidity" style="display: none;"></input>
<label for="id_delivery_set-0-weight" style="display: none;">

    Weight:

</label>
<input id="id_delivery_set-0-weight" type="number" step="0.01" name="delivery_set-0-weight" style="display: none;"></input>
<input id="id_delivery_set-0-DELETE" type="hidden" name="delivery_set-0-DELETE"></input>
<input id="id_delivery_set-0-bill" type="hidden" name="delivery_set-0-bill"></input>
<input id="id_delivery_set-0-id" type="hidden" name="delivery_set-0-id"></input>
<a class="btn del btn-danger" href="javascript:void(0)">

    remove

</a>

Picture:

I would like the "remove-link" below the "amount-input-field". How can I achieve this with CSS?

.subform {
     display: inline-block;
}

.del {
     ????
}

A solution using jQuery is also acceptable.

Answer №1

In the event that your input elements are currently displayed inline, you can change the appearance of the button by using the following code:

.btn-danger{ display: block;}

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

Tips for swapping out a div tag with another div tag in the same spot without needing to redirect to a different page by utilizing bootstrap

Currently, I am developing a JSP project that utilizes Bootstrap for the frontend. I have come across a question regarding HTML design. Is there a way to replace one div tag with another div on the same page without navigating to a new URL using Bootstrap ...

How can we enhance our proxyURL in Kendo UI with request parameters?

As outlined in the Kendo UI API documentation, when using pdf.proxyURL with kendo.ui.Grid, a request will be sent containing the following parameters: contentType: Specifies the MIME type of the file base64: Contains the base-64 encoded file content fil ...

Copying an HTML <div> and inserting it into a database involves capturing the input text value as part of the process

How can I duplicate a content div in jQuery using the clone() method, while also incorporating the value of an input text? Is this the correct approach, or is there a better alternative? ...

What could be causing multiple executions of an Ajax post request?

My code snippet: $(document).ready(function(){ $("#mainbutton").click(function(){ $("#ajaxform").submit(function(e){ var info = $(this).serialize(); $.ajax( { ...

Unexpected behavior found in certain parts of jquery due to the implementation of Ajax

Every time I try to use the ajax code on the same page or an external .js file, it seems to cause issues and prevents other parts of the code (jquery) from functioning properly. The ajax should only trigger when clicking on a specific li element with the c ...

What is the best way to ensure that my drop-down menu items match the size of the parent nav bar?

I'm having trouble creating a dropdown menu using only CSS. Specifically, I am struggling to ensure that the dropdown menu is the same size (width and height) as its parent element. Here is a link to a working example: HERE This is the snippet of HT ...

Adjust the remaining choices according to the dropdown selection

I am looking to dynamically adjust other dropdown menus based on the selection in a specific dropdown. For example, when the main dropdown is changed to "Change," I want the other dropdowns to automatically select the "Refused to Answer" option. HTML < ...

Best method for connecting user input with a class

I'm currently working with a WYSIWYG editor (Tinymce) that allows users to post YouTube videos. In order to make the video content responsive, I need to add the class "video-container" around any "iframe" tags inserted when users paste a YouTube link ...

Tips for aligning items at both ends using flexbox

I have a td containing two div elements, and my goal is to align these div at opposite ends. <td class="lefts"> <div> <h4>VOUCHER </h4> <h4>DATE TIME </h4> <h4>SALESMAN</h4> ...

Implementing a fixed search bar in Angular for a dropdown selection using mat-select

I'm currently utilizing a mat-select widget from Angular-Material in my application To enhance user experience, I am adding a search bar at the top of the select dropdown for filtering options: <mat-select placeholder="Select a store" ...

Verify the password on a form by comparing it with the encrypted password stored in the database using the SHA-

My goal is to validate a password in a form against an encrypted password stored in a database using SHA-512 hashing. This validation process is specifically for a change password form. I am able to validate passwords when they are not encrypted, but I ha ...

What is the maximum size for an ajax post request?

I am in the process of converting an old MSAccess mdb file. I am attempting to transfer data from the server into a 2D array, but I believe I may be approaching it incorrectly. Here is a line from the JQuery code on the main page: $.ajax({ url: "clie ...

Is it possible to deinitialize data tables (remove from memory)?

I'm currently utilizing data-tables (with jQuery) on my website. The particular data-table I have implemented seems to be consuming excessive memory in javascript, causing a slowdown in other functionalities. Is there a way for me to de-initialize th ...

Exploring the power of Vue.js by utilizing nested components within single file components

I have been attempting to implement nested single file components, but it's not working as expected. Below is a snippet of my main.js file : import Vue from 'vue' import BootstrapVue from "bootstrap-vue" import App from './App.vue&apos ...

Retrieve and modify the various elements belonging to a specific category

I'm currently developing a chrome extension and I need to access all elements of this specific type: https://i.stack.imgur.com/sDZSI.png I attempted the following but was unable to modify the CSS properties of these elements: const nodeList = documen ...

Design a unique div in the style of Google

How to Position User Data in Front of Profile Image I am currently struggling with positioning the user data in front of the profile image (the round one with the letter). I have shared my code below: <div class="conta"> <p>Logg ...

Tips for including a permanent button at the bottom of a material ui dialog box

I want to implement a dialog popup in my react js application. When the user clicks on a button, the dialog should open up. Inside the dialog, there is a form with input fields. After the user fills out all the inputs, they can submit the information by cl ...

What is the method for sending parameters to PHP from an HTML file using AJAX?

My protfolio.html file contains a table #gallery with different categories. I want to dynamically update the content of the #gallery based on the selected category using ajax. I have a php file that scans a specific folder for images related to the categor ...

Trouble with displaying days on the Datepicker

I'm currently facing an issue with my datepicker. I have a specific set of days that should be highlighted on the calendar, and it needs to be constantly updated. For example, past days are removed from the calendar automatically to keep it current. H ...

Issue with border spacing functionality

I'm having some difficulty with my border spacing in CSS. No matter what size I specify, it doesn't seem to have any effect. I just want to use a border for the top line. Here is my CSS: p { border-spacing: 5000px; text-align: right; ...