Alignment of text fields in a vertical manner

How can I vertically align text input fields using CSS?

<form action='<?= $_SERVER['PHP_SELF']; ?>' method='post'>
            <p><label for='username' class=''>Username:</label>
            <input type='text' name='username' id='username' class='field' value='' tabindex='10' /></p>
            <p><label for='password' class=''>Password:</label>
            <input type='text' name='password' id='password' class='field' value='' tabindex='20' /></p>
            <p><label for='e-mail' class=''>E-mail:</label>
            <input type='text' name='e-mail' id='e-mail' class='field' value='' tabindex='35' /></p>
            <p><input type='submit' name='insert' id='insert' class='button' value='Insert!' tabindex='40' /></p>
    </form>

Are there alternatives to using tables for alignment?

Thank you, Patrick

cssvertical-alignment

Answer №1

If you're looking to align the text boxes in a neat layout, consider structuring your HTML code like the example below. For fine-tuning the visual appearance, tools like Internet Explorer Developer Tools, Firefox's FireBug, or Opera's Dragonfly can be quite handy.

<form action='' method='post'>
<div style='clear:both'>
    <label style='float:left;width:5em;display:block' for='username' class=''>Username:</label>
    <input style='float:left;display:block' type='text' name='username' id='username' class='field' value='' tabindex='10' />
<div>
<div style='clear:both'>
    <label style='float:left;width:5em;display:block' for='password' class=''>Password:</label>
    <input style='float:left;display:block' type='text' name='password' id='password' class='field' value='' tabindex='20' />
</div>
<div style='clear:both'>
    <label style='float:left;width:5em;display:block' for='e-mail' class=''>E-mail:</label>
    <input style='float:left;display:block' type='text' name='e-mail' id='e-mail' class='field' value='' tabindex='35' />
</div>
<div style='clear:both'>
    <input style='width:5em;display:block' type='submit' name='insert' id='insert' class='button' value='Insert!' tabindex='40' />
</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

Ways to align text and horizontal rule perfectly within a div container?

I need to add some text to my <div> container and make sure it is centered. .hr { background: green; height: 50px; margin: 65px 0; width: 3000px; } <div class="hr"></div> This is an illustration of my project: A picture showing m ...

htmlcsspositiontext-alignment

What steps can be taken to ensure the visibility and accessibility of two vertically stacked/overlapped Html input elements in HTML?

I have encountered a challenge with my HTML input elements. There are two input elements that overlap each other, and I would like to make both inputs visible while only allowing the top input to be editable. I have tried several approaches involving z-ind ...

htmlcssangulartypescriptz-index

Hide object scroll percentage with CSS styling

Is there a way to dynamically hide an element based on the user's scrolling behavior? I have incorporated floating social buttons into my website, and I am looking for a solution that will hide them when the user reaches the bottom of the page (foote ...

cssscrollhidepercentage

Is there a way to deactivate specific options within the "Select" component on Material-UI, similar to how it is done in the "Autocomplete" feature?

Is it possible to restrict certain options in the Select component similar to how it is done in the Autocomplete component? PS: The options are present in an array. <FormControl variant="outlined"> <InputLabel>States</Inp ...

cssreactjsmaterial-ui

Adjusting the outline color of a Material UI Select component in outlined mode to a different color when the dropdown is activated (currently shown as blue)

Is there a way to change the outline color of Material-UI select component outlined variant correctly? I need help changing the default blue color to red, any assistance would be greatly appreciated Click here for an image reference Reference code snippe ...

javascriptcssreactjsreact-reduxmaterial-ui

Elements not being styled by CSS properties

I am facing an issue with a CSS file designed to theme a page in white on black, as opposed to the usual black on white. body { background-color: black; } h1 h2 h3 h4 h5 h6 p { color: white; } However, the color: white; property is not being applied ...

htmlcsstwitter-bootstrap

Switching up the styles in PHP-embedded HTML by tweaking the CSS

I used PHP to create HTML elements by echoing them out, but I ran into an issue when trying to change the CSS for those HTML elements. Can you help me figure out how to do this? The PHP } else { include("steamauth/SteamCo ...

phphtmlcss

Modifying a section of the source name using jQuery continues to occur repeatedly when the window is resized

I have written a piece of code that is designed to identify the src attribute of all images within a specific div and modify the src name when the window width is less than 900 pixels. The code works perfectly when the page is refreshed, but I encounter an ...

javascriptjqueryhtmlcss

What is causing Firefox to display an additional line in this section?

After much effort, I've been attempting to eliminate the extra spacing on this page in Firefox: Do you see the menu? If you compare it to Chrome, you'll notice that the menu is positioned too low beneath the background, giving the layout a broke ...

htmlcsshtml-lists

Change the CSS menu item to directly load the website instead of using javascript to replace a placeholder

I have a CSS navigation menu, but I'm facing an issue. When I click on a link in the menu, like Google for example, it only changes the name of the placeholder and doesn't actually load the page. Any suggestions on how to fix this? Thank you for ...

javascriptjqueryhtmlcssmenu

Angular-fontawesome icons are experiencing issues with their background color not scaling properly

Currently utilizing angular-fontawesome, I am seeking to alter the background color of a font-awesome fa-icon <fa-icon class="vue-icon" [icon]="faVue" ></fa-icon> To change the color, I modified the CSS using ...

cssangularfont-awesome

Bootstrap is designed to dynamically adjust to the size of the browser window, ensuring a smooth

After completing the construction of a new website, I encountered an issue where the styles and layouts are responsive when adjusting the browser window size. However, upon opening responsive inspect tool, no changes occur - columns refuse to break and t ...

htmlcsstwitter-bootstrapresponsive-design

Is there a way to specifically import only variables and mixins from Sass stylesheets?

Using the Zurb Foundation 4 (S)CSS framework has presented a challenge with massively duplicated styles. Each file that I import 'foundation' into brings along all of Foundation's styles, resulting in redundant declarations for body, .row, . ...

cssruby-on-railssasszurb-foundationmodularity

Tips for choosing the nearest table rows with CSS

When it comes to CSS, specifying a style for the immediate child rows of a table can be done like this: table > tr { background: blue; } The challenge arises when we have a <tbody> tag surrounding the <tr> tags. Is there a way to addre ...

htmlcss

List organized in two columns utilizing the data-* attribute

Is it possible to display a list in a two-column format based on a data attribute of each item? <ul> <li data-list="general_results">general text1</li> <li data-list="general_results">general text2</li> <li dat ...

htmlcss

Styling JavaFX ChoiceDialog with CSS

I'm currently struggling with customizing the appearance of a ChoiceDialog in my JavaFX application using CSS. While I've successfully applied styles to other dialog panes, it seems that the ChoiceDialog is not responding as expected, possibly du ...

cssjavafx-8

The link button became unresponsive as soon as I implemented CSS changes

I customized one of my buttons with special styling, and now I'm facing an issue where the button is clickable but it fails to direct me to the intended link (which should open a YouTube video in a new tab). #help { background-color: cornflowerbl ...

htmlcssbuttonhyperlinkyoutube

Having trouble understanding why adding raw HTML is yielding different results compared to generating HTML using jQuery

I need assistance with two jsFiddles: http://jsfiddle.net/kRyhw/3/ http://jsfiddle.net/kBMSa/1/ In the first jsFiddle, there is code that adds HTML to my ul element, including an 'X' icon in SVG format. Attempting to recreate this functionali ...

javascriptjquerycss

Can someone please clarify how the nth-of-type selector functions?

I can't understand why the nth-of-type selector needs to be set to 2 instead of 1 for the first sibling of this type in the code. To see the code in action, check out this jsfiddle: https://jsfiddle.net/xj5hvn16/ If anyone could kindly provide an ex ...

htmlcsscss-selectors

Switching the background image upon hover while incorporating a subtle fade transition in HTML and CSS

Is there a way to set two background images on a div and have them change when hovering with a fade effect? Similar to the example shown. .kid { max-width:50%; position:relative; } .kid img { display:block; opacity:1; height: auto; transition:.6s ease; ...

htmlcssanimationhoverfade