Tips for arranging two form elements side by side

I am currently working on designing a login form and I want to position the checkbox "Remember me" and the link "Password?" next to each other rather than below each other. Here is the current situation:

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

Here is the code snippet:

.form-group {
    display: block !important;
    margin: 0 auto !important;
    max-width: 75% !important;
    margin-bottom: 5% !important;
}
 <div class="form-group">
           <div class="checkbox">
                  <label asp-for="Input.RememberMe">
                      <input asp-for="Input.RememberMe" />
                          @Html.DisplayNameFor(m => m.Input.RememberMe)
                  </label>
            </div>
            <p>
                <a id="forgot-password" asp-page="./ForgotPassword">Password?</a>
            </p>
    </div>

Any suggestions on how I can achieve this alignment?

Thank you

cssformsalignment

Answer №1

To align the elements in the center using inline-block, apply padding to achieve the desired positioning.

As you have used !important multiple times, ensure it is also included in the following class:

.d-inline-block {
  display: inline-block !important;
}

<div class="form-group">
  <div class="checkbox d-inline-block">
    <label asp-for="Input.RememberMe">
      <input asp-for="Input.RememberMe" />
      @Html.DisplayNameFor(m => m.Input.RememberMe)
    </label>
  </div>
  <div class="d-inline-block">
    <a id="forgot-password" asp-page="./ForgotPassword">Need Help with Password?</a>
  </div>
</div>

Answer №2

Consider replacing the 'display: block' with 'display: flex' within the 'form-group' class selector

Answer №3

By default, the div and paragraph elements are considered as block elements.

To display these elements side by side, you can use the div class="checkbox" with a style of display:inline-block;.

You can simplify your code by removing the unnecessary <p> tag from your form and keeping only the hyperlink. Here's an example:

.form-group {
    display: block !important;
    margin: 0 auto !important;
    max-width: 75% !important;
    margin-bottom: 5% !important;
}
<div class="form-group">
   <div class="checkbox" style="display:inline-block">
       <label asp-for="Input.RememberMe">
           <input asp-for="Input.RememberMe" />
           @Html.DisplayNameFor(m => m.Input.RememberMe)
       </label>
   </div>
   <a id="forgot-password" asp-page="./ForgotPassword">Password?</a>
</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

How to use jQuery to hide radio buttons that are not checked when clicking a submit

Looking to dynamically hide all unchecked radio buttons and their labels until a submit button is clicked, displaying only the checked radio button. <form method="post"> <input type="radio" name="radiobtn"> <label for="first">Fir ...

javascriptjqueryhtmlcss

What is the best way to create a mobile menu transition that moves in a "reverse" direction?

I have been working on animating a mobile menu where the three stripes transform into an 'X' when clicked and revert back to three stripes when closed. The transition to an 'X' is working perfectly, but when closing the menu, it jumps b ...

jquerycssanimation

What could be the reason behind Lottie rendering an SVG element outside of its parent div?

After struggling with this issue for an entire day, I'm seeking help to implement an animation using Lottie on my website. The animation format is 1080*1920, but the problem arises when trying to fit it within a div. The dimensions of the div are set ...

javascripthtmlcsssasslottie

In IE11, using flex-direction column can cause flex items to overlap

Encountering a problem with flexbox in IE11. The flex-items overlap when using flex-direction: column: https://i.sstatic.net/fHBw0.png In chrome and safari, it appears like this: https://i.sstatic.net/c2h7P.png .container { display: flex; flex-d ...

htmlcssinternet-explorerflexboxinternet-explorer-11

Issue: My Mini-Chat Box is experiencing overflow problems in Internet Explorer

Encountering another cross-compatibility glitch with IE on my website, www.zerozaku.com. While it works fine on Chrome and Firefox, IE is having trouble with the Mini-Chat box overflowing. Any assistance would be greatly appreciated! For testing purposes, ...

htmlcssbrowserinternet-explorercompatibility

Fixed first column in a spacious data grid

The layout I have created can be viewed in the Fiddle http://jsfiddle.net/5LN7U/. <section class="container"> <section class="field"> <ul> <li> Question 1 </li> <li> question 2 </ ...

javascriptjqueryhtmlcss

Angular Universal causes SASS imports to malfunction

Check out this sample app that you can download to see the issue in action: https://github.com/chrillewoodz/ng-boilerplate/tree/universal I am currently working on implementing angular universal, but I'm encountering an error with a SCSS import in o ...

cssangularsassangular-universal

What is the best way to ensure a textarea remains expanded when the parent element is in focus?

I have successfully implemented a textarea box that expands upon click and retracts when it loses focus. However, I am facing an issue where if the textbox is already in expanded form, I want it to stay expanded if the user clicks anywhere within the cont ...

javascripthtmlcss

Vue: Implement out-in transition where the incoming element appears before the outgoing element has completely disappeared

Check out my code on Codepen: here In this scenario, I have set up two div elements: Block 1 and Block 2. The functionality I am looking for is when a button is clicked, Block 1 smoothly translates to the left until it goes out of view. Once that happens ...

javascriptcssvue.jsvuejs3

How can I update the style of my array-bars using componentDidMount()?

I created a visualization tool for sorting algorithms that displays vertical bars with varying heights and sorts them. The "Generate new Array" button triggers a function to generate a new array each time it's clicked, which is also used in the compon ...

javascripthtmlcssreactjs

Is there a way to assign a specific color to individual users in a chat?

I have successfully implemented a chat feature using Pusher, but now I want to customize the appearance by changing the color of the username for the logged-in user when they are active in the conversation. Currently, both my username and another user&apos ...

javascripthtmlcsslaravelvue.js

The sup tag does not function properly when used within the title tag

I added a sup tag inside a title tag but it doesn't seem to work. Surprisingly, the same sup tag works perfectly fine within li tags. Can anyone explain why this is happening? I tried changing the title tags to H class tags but I'm still curious ...

htmlcss

How can you change the width of <td> and <th> elements?

I am trying to keep a table header fixed at the top of a window, but for some reason, setting the widths of the <td> and <th> elements as shown below is not resulting in them having the same width (the column headers are misaligned with other c ...

htmlcsscss-tables

How can I utilize the LED flash on a Windows Phone using WinJS?

Currently delving into the world of WinJS and endeavoring to create an application that involves operating the LED Flash. I am seeking guidance on how to properly access the LED Flash functionality to allow for toggling it ON or OFF. Your insights on how ...

javascripthtmlcsswindows-phonewinjs

jQuery plugin stops functioning properly following the use of the jQuery display block method

In my project, I am exploring the use of divs as tabs with jQuery. Within these divs, I also want to incorporate another jQuery plugin. Currently, I have manually created these div tabs using jQuery and set the default style for second and subsequent divs ...

javascriptjqueryhtmlcss

Display a hidden table row with an image click using JQuery

I am working with a table that currently has 2 rows. The first row contains an image, while the second row is hidden from view. Using JQuery, my goal is to make this hidden row visible. Below is the structure of the table: <table> <tr> ...

jquerycss

Unraveling Django's Registration and Login Process through Demonstrations

Can someone please explain in detail how to create a registration and authentication process using simple language? I have successfully implemented authentication (login) with django.contrib.auth, but now I want to set up a complete registration process in ...

djangoformsauthenticationregistration

Ensuring Form Validation in Django Before Submission

I am facing an issue with a form where I retrieve data using form.cleaned_data. My goal is to display this data on another page for the user to review before it gets entered into the database. The challenge I'm facing is how to resend this data as a P ...

djangoformspost

In what way does Google+ make their logo come to life on the left side of the navigation bar when the scrollbar is minimized?

I'm curious about the animation Google+ uses to make their logo slide in on the navigation bar when it shrinks. I've managed to shrink the scrollbar on scroll, but I can't quite replicate their technique for animating the icons. I'm eag ...

javascriptjqueryhtmlcss

Guide to placing a button on the same line as text with the use of JavaScript

Does anyone know how to add a button to the right of text that was added using JS DOM? I've tried multiple techniques but can't seem to get it right - the button always ends up on the next line. Any tips on how to achieve this? var text = docu ...

javascripthtmldombuttonalignment