Ensure that all of the text boxes are aligned perfectly in the same vertical position

Is there a way to align all the textboxes in the same vertical position without using tables, only using HTML and CSS? The textboxes should start just after the label and follow the width of the label. Also, all labels are left-justified.

Code ::

<div style="width: 100%; font-family: Arial, Helvetica, sans-serif;">

                <div style="text-align: left; width: 100%; font-size: 13px; margin-bottom: 5px;">
                    <b>Previous Password:</b>
                    <asp:TextBox ID="txt_prev_pwd" runat="server"  />
                </div>
                <div style="text-align: left; width: 100%; font-size: 13px; margin-bottom: 5px;">
                    <b>New Password:</b>
                    <asp:TextBox ID="txt_new_pwd" runat="server" />
                </div>
                <div style="text-align: left; width: 100%; font-size: 13px; margin-bottom: 5px;">
                    <b>Retype Password:</b>
                    <asp:TextBox ID="txt_re_pwd" runat="server" />
                </div>
            </div>
        </div>

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

javascripthtmlcssasp.net

Answer №1

To apply CSS styles to the b tag, you can use the following code:

b{
  display: inline-block;
  width: 150px;
}

It is recommended to replace the <b> tag with <label>, add a class name, and then customize its style.

Answer №2

Below is the code you can utilize:

.fields{display:table}
.fields-row{display: table-row;}
.fields-row b{display: table-cell}
<div class="fields">

                <div class="fields-row">
                    <b>First Name:</b>
                    <input type=text />
                </div>
                <div class="fields-row">
                    <b>Last Name:</b>
                    <input type=text />
                </div>
                <div class="fields-row">
                    <b>Email:</b>
                    <input type=text />
                </div>
                <div class="fields-row">
                    <b>Phone Number:</b>
                    <input type=text />
                </div>
            </div>
        </div>

Answer №3

One method to consider is to enclose each line within its own div element, defining the width and using CSS properties like float, text-align, and align.

<div style="max-width: 50%; align: center">
  <div style="max-width: 50%; text-align: center; float: left">Field #1</div>
  <div style="max-width: 50%; text-align: center; float: right">
    <input type="text">
  </div>
</div>
<br>
<div style="max-width: 50%; align: center">
  <div style="max-width: 50%; text-align: center; float: left">Field #2 Blah</div>
  <div style="max-width: 50%; text-align: center; float: right">
    <input type="text">
  </div>
</div>
<br>
<div style="max-width: 50%; align: center">
  <div style="max-width: 50%; text-align: center; float: left">Here's field #3</div>
  <div style="max-width: 50%; text-align: center; float: right">
    <input type="text">
  </div>
</div>

Answer №4

While Whitcik's answer is quite precise, I personally prefer utilizing relative width:

b{
  display: inline-block;
  max-width: 75%;
  min-Width: 20%;
}

By doing this, you have the flexibility to test in various widths while maintaining a consistent aspect ratio, especially on mobile devices. It's just a DIFFERENT approach to the problem. Whitcik's response is definitely on point ;)

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

issue with Knex query output when integrated with Express.js

Below is the Knex raw SQL query that I have written. knex.raw("select group_concat(details_odishagovtjobdetails.more_info) as more_info,\ scrap_odishagovtjobs.start_date,scrap_odishagovtjobs.last_date,scrap_odishagovtjobs.post_name,\ ...

javascriptexpressknex.js

Add a User Control to a webpage seamlessly without triggering a full page reload

Is there a way to incorporate a user control into my pages without causing page post backs? I am unable to utilize Update Panels due to the presence of file upload controls within the user controls. In addition, I prefer not to place custom controls in a ...

c#jqueryasp.netajaxuser-controls

Issue with moment library causing date to appear incorrect on 31st day

I am experiencing an issue when finding the difference between 2 dates in years. Specifically, when I choose the 31st date, it returns an invalid result as NaN. However, with other dates, the calculation displays the correct outcome. const selectedValu ...

javascriptmomentjs

Divide a SINGLE BACKGROUND IMAGE in HTML into two separate links of equal size, one at the top and

As a beginner in HTML, I am trying to find a way to divide a background image into two equal sections without using image mapping. I attempted to split the links by setting the style to 0% and 50% to designate the top and bottom halves, but unfortunately, ...

javascripthtmlcsshtml5-canvas

Improving the App() function in React and Typescipt

When working on my React/Typescript app, I encountered a challenge with the length of the code in one of the sections. Despite watching tutorials and searching for solutions, I couldn't find a clear way to refactor it. The specific issue is with refa ...

javascriptreactjstypescript

Stop manipulating links with jquery mobile to maintain original behavior

I have a situation where I am listing WordPress posts, and when I click on a title, jQuery is loading the single post page for me via ajax. However, I don't want this behavior - I just want the link to act normally. I have tried using the following co ...

jqueryhtmlcsswordpressjquery-mobile

Bringing in the component's individual module

I encountered the error message in my Angular application - Can't bind to 'formGroup' since it isn't a known property of 'form' - and managed to resolve it by including the import import { AddEditModule } from './add.edit ...

javascriptangularimport

Enhance the appearance of div elements in GWT/HTML with custom styling

I am relatively new to GWT and have been exploring various options, but I have not yet found a solution to my issue. The challenge at hand involves developing a function schedule system in GWT, where I am working on designing the frontend. We currently ha ...

javajqueryhtmlcssgwt

Which is Better for Creating DropDown Menus: CSS or JavaScript?

Starting a new project that involves dropdown menus with categories and subcategories within them. I'm curious about the advantages of using CSS3 only menus compared to traditional JavaScript ones. There are several jQuery menu options available as we ...

javascriptjquerycssjquery-ui

What is the best way to pass the value from one JavaScript file to another in the ViewModels and main JavaScript file?

https://i.sstatic.net/pzFAS.jpg Within the login.js file, a REST API is returning specific values that need to be utilized in the Dashboard.html file. However, the values are not being retrieved successfully in the dashboard.js file. A similar requiremen ...

javascripthtmlmvvmknockout.jsoracle-jet

Unusual styling: Unexpected CSS :after impact on card layouts in Bootstrap 4

I'm currently utilizing a Bootstrap 4 masonry card layout for a particular project, and within this project, there is a <select> element that has been styled with custom CSS properties. One of the customized styles includes a caret created using ...

csstwitter-bootstraptwitter-bootstrap-4column-count

How to efficiently pass props between components in NextJs

This is the project's file structure: components ├─homepage │ ├─index.jsx ├─location │ ├─index.jsx pages │ ├─location │ │ ├─[id].jsx │ ├─presentation │ │ ├─[id].jsx │ ├─_app.jsx │ ├─index.jsx ...

javascriptreactjsreduxnext.js

Unable to use jQuery to choose an item from a dropdown menu and reveal a hidden text box

Seeking assistance in displaying a paragraph with text and a textbox when a specific option is selected from the dropdown menu on my form. Previously used code for radio buttons, but encountering issues with this scenario. Any guidance would be greatly app ...

javascriptjqueryhtmldrop-down-menuforms

Leveraging React's useEffect hook to asynchronously fetch and load data

In my coding scenario, there is a parent component containing a child component which loads data asynchronously. This is what I currently have: <Parent> <AsyncChild data={props.data} /> <Child /> </Parent> Within the AsyncChil ...

javascriptreactjs

Guidelines for accessing the value of the parent function upon clicking the button within the child function?

I have a pair of buttons labeled as ok and cancel. <div class="buttons-div"> <button class='cancel'>Cancel</button> <button class='ok'>Ok</button> </div> The functions I am working wi ...

javascripthtmlcsscurrying

An issue occurred in the evaluation of tidy when attempting to access the object 'titles' in the mask

Whenever I attempt to run this code, an error pops up. My goal is to extract data from multiple pages. However, when executing the script below, I encounter the following error message: Error in eval_tidy (xs [[j]], mask): object 'titles' not f ...

htmlrweb-scrapingrvest

Verifying the visibility of an element

I am facing a challenge with a list of apps displayed on a non-angular page. The availability of these apps depends on the subscription level purchased by the user. Even if an app has not been purchased, it is still listed but displayed with an overlay (pl ...

javascriptangularjsseleniumselenium-webdriverprotractor

What is the origin of the second parameter in an arrow function that returns another arrow function in a React component with Redux?

I'm having trouble understanding where the (val) parameter is coming from in the returned arrow function. I understand that max/minLength is an arrow function taking an argument set on the input field (3 and 25), and it returns another arrow function ...

javascriptreactjsecmascript-6redux-formhigher-order-functions

When a Double Click event is activated in EaselJS, it also automatically triggers a Click event

Listening for Events function Solitaire() { this.table.addEventListener("click", this.handleClick.bind(this)); this.table.addEventListener("dblclick", this.handleDoubleClick.bind(this)); } Event Handling Solitaire.prototype.handleDoubleClick = f ...

javascriptcreatejseaseljs

How should script files be imported correctly in Next Js?

I've been struggling to import JS files in a template of Bootstrap. The CSS files are imported properly, but I'm facing issues with JS imports. I learned that in Next.js, you can import them using the useEffect hook. However, even after implement ...

javascriptjqueryreactjsbootstrap-4next.js