What's the best way to make two buttons appear side by side on a webpage?

I need to have my two buttons, Update and Cancel, displayed next to each other on the same line.

Currently, there is a gap between the two buttons as shown in the attached image.

Below is the HTML code I am using:

<div class="form_block span2">
    <br>
    <input class="btn btn-primary" type="submit" value="Update" style="display:inline;"/> 
    <a class="btn btn-danger" style="display:inline;" href="{% url profile_detail profile.user.username %}">Cancel</a>
</div>

How can I ensure that the two buttons are displayed side by side?

htmlcss

Answer №1

Arrange the buttons within an <ul> container, where each button is placed inside a <li> element with the attribute style="display:inline"

Here's a sample code snippet to illustrate this:

<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
 }
 </style>

 <div class="form_block span2"><br>
    <ul>
      <li><input class="btn btn-primary" type="submit" value="Update" /></li>
      <li><a class="btn btn-danger" href="{% url profile_detail profile.user.username %}">Cancel</a></li>
    </ul>
 </div>

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

Error encountered while scrolling with a fixed position

I am currently in the process of developing a carousel slider that resembles what we see on Android devices. The main challenge I am facing at this early stage is applying the CSS property position: fixed; only horizontally, as vertical scrolling will be n ...

javascriptjqueryhtmlcss

Necessary CSS selector input equivalent in Reactive Forms

Is there a similar CSS method like input:required {CSS} to style all the reactive form fields in Angular that are set as required using Validators.required in their formControl? Or is there another approach to achieve this with CSS? ...

angularcssangular-reactive-forms

Guide to placing a heading in one corner and a button in the opposite corner

Desired Outcome: I am aiming to achieve a design similar to the one shown in the image below. Actual Result: However, what I ended up with looks more like the image below. This is my HTML: <div class="heading-container d-flex flex-row justify-con ...

htmlcsstwitter-bootstrap

Why is there a CSS reference failure in Express and how can it be resolved?

Below, you'll find a simple express server I've put together: // check out my basic Express server var express = require("express"); var app = express(); var bodyparser = require("body-parser"); app.use("/public/", express.static("./public/")); ...

javascriptcssnode.jsexpress

Tabs within the AutoComplete popup in Material-UI

Would it be feasible to showcase the corresponding data in the AutoComplete popover using Tabs? There could be potentially up to three categories of data that match the input value, and my preference would be to present them as tabs. Is there a way to in ...

javascripthtmlreactjsmaterial-ui

javascript onload select the text in the textarea

Is there a way to have JavaScript automatically highlight the text inside a textarea when the page is loaded? ...

javascripthtml

transform ajax data into an array structure

I need to convert the values retrieved from an AJAX call into an array so that I can access and format them accordingly. $(document).ready(function() { $('#documenter_nav > li a').click(function(){ var url = $(this).attr('data- ...

htmlajax

Unable to properly shut the sliding-over modal

I have implemented a customized version of the codrops slide & push menu (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) to create an overlay on my webpage. However, I am facing difficulty in closing it using another link. Any assistance on ...

jqueryhtmlcss

Is there a way I can detect a browser timeout and display a custom error message?

My webpage in classic asp contains a link to a local IP address, shown below: <a href="http://192.168.1.89">Link</a> When the local IP address is not available, the web browser eventually times out and shows its own error message. I ...

javascripthtmlasp-classictimeout

What is the best way to centralize the storage of my website's header and footer?

Constantly updating headers and footers requires me to manually transfer the code to each web page every time, which is not the most efficient method. I'm considering using a "header" and "footer" div, and using jQuery's $(document).ready functio ...

javascriptjqueryhtmlheaderfooter

Steps for creating a resizable and automatically hiding side menu

I am working on a side menu that can be resized, and I want it to collapse (set to zero width) when it is empty. I have considered implementing one of these features individually, but I'm not sure how to make both work together. Is there a way to ad ...

javascriptcssvue.js

When a user clicks a button, Javascript will generate a fresh upload image form

I am interested in creating a button that, when clicked, generates a new image upload button within a form I have already created in HTML. My goal is to figure out the best approach for this functionality, especially considering that there is a remove butt ...

javascriptjqueryhtml

Optimizing CSS usage within Django: top recommendations

Throughout a 6-month-long project, I have continuously added new URLs. However, I am now encountering an issue when using the extend 'base.html' function on other pages where the CSS overlaps and creates confusion. My question is: What are the b ...

javascriptpythonhtmlcssdjango

Tips for locating a file within an input element in HTML using jQuery

I attempted to upload a file using jQuery's $.ajax call and formData. To add the file to the formData, I initially tried: var fd = new FormData(); fd.append($('#myFileInput)); However, this method failed. Next, I attempted: var fd = new Form ...

jqueryhtmlfile-io

Guide to assigning values to Input<input> and Select <select> elements using Javascript

I am looking to automatically set values in an input or select tag based on certain conditions defined in the JavaScript code below. However, I am facing an issue where the data does not get reflected in the database upon submitting. Any suggestions or cod ...

javascripthtml

Creating a data structure using jQuery/JavaScript when submitting a form - a guide

Currently, I am attempting to gather form input values and organize them into an array of objects that will then be sent to MongoDB. However, I am facing difficulty in figuring out how to include an array within the objects (refer to the comment in the cod ...

javascriptjqueryhtmlformsmongodb

Tips for placing text on top of an image within a <p> element

I am grappling with a situation where I have a div containing text within <p> tags, and also an accompanying PNG image. My goal is to position the image to the left of the div so that it overlaps with the text. Despite my attempts at utilizing z-inde ...

htmlcssz-indexoverlap

To modify the background of a text, simply click on the image

I recently discovered a helpful hack in an answer on this website, which allows an image to be resized when clicked using the checkbox method. I have successfully implemented this feature but encountered an issue when trying to apply a CSS style change to ...

htmlcssonclick

The header grid will disappear in the p-dialog when the browser is minimized

Check out this informative article on creating a dynamic dialog box using PrimeNG here Take a look at the image below to see how the dialog box appears when opened: https://i.sstatic.net/nUq1d.png One issue I am facing is that the grid header gets hidd ...

htmlcssangulardialogprimeng

Display a large feather icon on the left side with the title and description positioned on the right side

I'm trying to achieve a flex-style UI that resembles this design: https://i.sstatic.net/2mFrm.png So far, I've managed to split the UI using col-5 col-2 col-5 classes from Bootstrap and utilize flex to create the col-5 UI sections (left and rig ...

htmlcssbootstrap-5