How can you align the login form fields in a single row?

I am looking to align the login fields in my form so that they are on the same row, similar to the layout seen here. I have tried various CSS codes, but have not been able to achieve the alignment I desire.

This is how my current login form looks:

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

Here is how I would like to adjust it:

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

Below is the CSS code for this section:

.log_forms input[type=text], input[type=password] {
margin: 10px 0 20px;
width: 99%;
padding: 7px 0 7px 4px;
border: 1px solid #E3E3E3;
csswordpresswidgetstyling

Answer №1

Ensure your <div> has a proper width. You can achieve this by adding the following CSS:

.log-form-group {
  display: inline-block;
  width: 48%;
}

Preview

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

Updated

To enhance the design, include this additional CSS:

.log_forms input[type=text], input[type=password] {width: 95% !important;}
.log-form-group {width: 32%;}

By applying these changes, you will achieve the desired look:

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

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

Fashionable flexbox chat design break

Can anyone explain why the image shifts to a new line when the dimensions of the bubble are restricted? If I adjust the maximum width of the bubbles to calc(100% - 70px), the image stays on the same line, but the last word may break onto a new line, disru ...

htmlcssflexbox

Tips for controlling the placement of divs on a webpage

I need to align 3 divs in a specific way on my webpage. One should be on the left side taking up 25% of the window, one on the right side also taking up 25%, and the last one in the center taking up the remaining space. I'm struggling with how to achi ...

csshtml

Non-responsive image in Bootstrap 4

My struggle is with making my website fully responsive. Whenever I use the img tag with a width of 100% on a large screen, the image fits perfectly, but when the window is resized, a horizontal scroll appears, creating white spaces and causing the image ...

csshtmlbootstrap-4

positioning three background images in the same place

I have three images img1.png, img2.png, img3.png with heights 600px,400px and 200px respectively. My goal is to position these images in a specific order: img1.png in the back, img2.png in the middle, and img3.png in the front. I attempted to use CSS posit ...

jqueryhtmlcssimageposition

inherited background colors are not passed down

I am having issues with applying the background and padding in my CSS. It seems that my CSS is not overriding the Bootstrap styles, and when I apply the container style, the display property is not working as expected. Here is the code snippet: ...

htmlcssbootstrap-5

CSS: Revert INPUT Element Back to Default Width

Although it may seem impossible, I am still going to ask the question. Suppose I have the following HTML: <div style="width: 500px;"> <input class="full" /> </div> And the corresponding CSS: input { width: 100%; } .full { ...

htmlcssbrowsercross-browser

Extracting meta header information in JSON format from Rank Math plugin: A step-by-step guide

I've been working with the Rank Math plugin and I'm looking to extract the meta header information in JSON format. Can you assist me with this? Currently, the Rank Math plugin provides the meta head data in HTML form, but I need it to be display ...

jsonwordpressmetadata

How to create a transparent background image in a Jekyll theme without impacting the visibility of the foreground

I'm new to HTML and CSS, currently working with a Jekyll boostrap landing theme from GitHub to create a static responsive website. I'm looking to change the background image on the theme and make it transparent to enhance the visibility of the fo ...

htmlcsstwitter-bootstrap

Deactivating the chrono set in batches using WordPress is a straightforward process

My dilemma lies in the fact that I have activated a total of 3200 chronos, which I now need to deactivate due to server capacity issues. Where should I look to find instructions on deactivating these entries from the database or using a function? What wou ...

phpmysqlwordpress

What symbol represents the share function in Unicode?

I've combed through Google, Stack Overflow, and various HTML character sites multiple times but have been unable to find the specific icon I'm looking for. Can someone please assist me with obtaining the HTML Unicode sequence for an icon that rep ...

htmlcssunicodefonts

Combining ng-repeat with the float property set to left

I am attempting to create two rows of divs using ng-repeat. Each div is styled with a float: left attribute, and at the end, I add a clearing div with clear: both. <div class="interval" ng-repeat="interval in intervals"> <div class="text-cen ...

htmlcssangularjs

Adjust the dimensions of the Bootstrap 4 navbar overlay to perfectly fit the navigation contents

Looking to customize the width of the Bootstrap 4 navbar overlay? Want it to adapt to its contents instead of occupying the entire screen when activated by clicking the hamburger icon. I've gone through the navbar, navbar-collapse, and navbar-nav clas ...

cssbootstrap-4

.addClass successfully adding classes to certain elements while encountering issues with others

Struggling with using the .addClass function on certain <div> tags. It seems to work fine on some, but not at all on others. I'm thinking that specific attributes within the class might be affecting it, such as position:relative; versus absolute ...

javascriptjquerycss

Using jQuery to extract the HTML content of an element while removing the style attribute

Is there a way to retrieve the raw HTML of an element, or obtain the HTML without the "style" attribute applied? Let's consider the example below: <div class="outer"> <div class="inner"> some text </div> </div> A ...

javascriptjqueryhtmlcssjquery-animate

Creating a CSS path that incorporates two conditions simultaneously

I'm currently facing a challenge with finding the CSS path in this scenario: There are over 20 child nodes, and I need to identify every node that has fill attribute not equal to none. I understand that I can target a specific node using :nth-child( ...

htmlcssnode.js

Certain links within the list are unresponsive to clicks

Just starting out with html, so please bear with me as I'm still learning... I've added a list of links to my WordPress page, but for some reason, the first few are not clickable. They appear fine here, but once on my page, they stop working. H ...

htmlcsshyperlinkhtml-lists

Utilizing media queries for responsive design in CSS

I've been working on aligning the page content for different browser sizes using CSS. However, I'm having an issue with the first @media statement - no matter what changes I make in there, it doesn't affect the layout. I've been using ...

cssmobilemedia-queries

Animating a div to continuously move back and forth in jQuery

My goal was to have a div move continuously left and right when the page loads. However, I mistakenly made it so that the movement only occurs on click events. The code snippet below shows what I initially wrote: <script src="https://ajax.googleapi ...

javascriptjqueryhtmlcss

The :focus pseudo-class is failing to target the input element

I'm dealing with a simple input field of type text: <input matInput type="text" placeholder="{{placeholder}}" class="input-field" [ngClass]="{'error': hasErrors}" [readonly]="isReadonly&quo ...

htmlcssangular8

Increase the bottom padding or add some extra space to the Bootstrap form or page

I am currently working on enhancing a Bootstrap Form that includes reset/submit buttons positioned at the bottom. A common issue is when iPhone users attempt to click the Submit button, which initially displays Safari icons before requiring an extra tap to ...

javascriptjqueryhtmlcsstwitter-bootstrap