Getting Started with CSS Alignment - A Novice's Guide

Question

Getting Started with CSS Alignment - A Novice's Guide

Recently, I embarked on my journey to learn HTML and CSS with the ambition of creating a login page. Although I've successfully crafted a basic version, I'm encountering an issue where the input boxes and labels are misaligned, giving off an unprofessional look. I seek guidance on how I can rectify this through CSS.

Below is my code:

<br /> UserName:
<input type="text" name="user name" size="15" />
<br /> Password:
<input type="text" name="password" size='15' />
<input type="text" hidden name="Password" size="15" /> <br />
<input type="reset" value="Login" />
<input type="submit" value="Cancel" />

https://jsfiddle.net/nxgm33y7/8/

html css

Answer 1

Answer №1

If you're looking to adjust your element positioning, it may require some changes to your markup. Below is a simple example where I've wrapped all elements in a div for easy manipulation. Using classes and ids will help in selecting the elements efficiently.

The structure includes using ul and li elements to display form fields vertically. Adding label tags with specified width can keep the form aligned properly.

To align the first button, such as a login button, with other elements, the selector

ul li:last-child input:first-child

is used. This can be replaced by simply adding a class.

ul {
  list-style-type: none;
}

ul li {
  margin-bottom: 10px;
}

ul li:last-child input:first-child {
  margin-left: 85px;
}

label {
  width: 80px;
  display: inline-block;
}

<div>
  <ul>
    <li>
      <label for="username">Username</label>
      <input type="text" name="username" id="username">
    </li>
    <li>
      <label for="password">Password</label>
      <input type="text" name="password" id="password">
    </li>
    <li>
      <input type="reset" value="Login" />
      <input type="submit" value="Cancel" />
    </li>
  </ul>
</div>

Answer 2

If you're looking to adjust your element positioning, it may require some changes to your markup. Below is a simple example where I've wrapped all elements in a div for easy manipulation. Using classes and ids will help in selecting the elements efficiently.

The structure includes using ul and li elements to display form fields vertically. Adding label tags with specified width can keep the form aligned properly.

To align the first button, such as a login button, with other elements, the selector

ul li:last-child input:first-child

is used. This can be replaced by simply adding a class.

ul {
  list-style-type: none;
}

ul li {
  margin-bottom: 10px;
}

ul li:last-child input:first-child {
  margin-left: 85px;
}

label {
  width: 80px;
  display: inline-block;
}

<div>
  <ul>
    <li>
      <label for="username">Username</label>
      <input type="text" name="username" id="username">
    </li>
    <li>
      <label for="password">Password</label>
      <input type="text" name="password" id="password">
    </li>
    <li>
      <input type="reset" value="Login" />
      <input type="submit" value="Cancel" />
    </li>
  </ul>
</div>

Answer 3

Answer №2

For a more professional appearance and responsive layout, it is recommended to utilize Bootstrap. However, in this example, only regular CSS has been used. You can view the fiddle here: https://jsfiddle.net/NayanaDas/5zg2qqum/. Give it a try:

HTML:

<body>

    <br />
    <div class="form-group">
    <label style="width:50%;">UserName:</label>
    <input type="text" name="user name" size="15" class="form-input"/>
    </div>

    <br />
    <div class="form-group">
    <label style="width:50%;">Password:</label>
    <input type="text" name="password" size='15' class="form-pswd"/>
    <input type="hidden" name="Password" size="15" /> <br />
    </div>

    <br>
  <div align="center" style="width:100%;">
    <input type="reset" value="Login" />
    <input type="submit" value="Cancel" />
</div>
</body>

CSS:

.form-group{

  width:100%;margin-left:5%;
}

.form-input{
  width:50%;margin-left:5%;
}

.form-pswd{
  width:50%;margin-left:6%;
}

Answer 4

For a more professional appearance and responsive layout, it is recommended to utilize Bootstrap. However, in this example, only regular CSS has been used. You can view the fiddle here: https://jsfiddle.net/NayanaDas/5zg2qqum/. Give it a try:

HTML:

<body>

    <br />
    <div class="form-group">
    <label style="width:50%;">UserName:</label>
    <input type="text" name="user name" size="15" class="form-input"/>
    </div>

    <br />
    <div class="form-group">
    <label style="width:50%;">Password:</label>
    <input type="text" name="password" size='15' class="form-pswd"/>
    <input type="hidden" name="Password" size="15" /> <br />
    </div>

    <br>
  <div align="center" style="width:100%;">
    <input type="reset" value="Login" />
    <input type="submit" value="Cancel" />
</div>
</body>

CSS:

.form-group{

  width:100%;margin-left:5%;
}

.form-input{
  width:50%;margin-left:5%;
}

.form-pswd{
  width:50%;margin-left:6%;
}

Getting Started with CSS Alignment - A Novice's Guide

Answer №1

Answer №2

Similar questions

Using PHP to create custom HTML email templates and sending them out via

I'm having trouble getting the data to parse correctly in ajax. Can anyone explain why it's not working?

Enhance your product listings in Opencart 2.0 by adding supplementary images alongside the main product image

Issues are arising with Angular Form where the FormControl is not being properly set up for the first field in my form

Alignment dilemmas

Issue with displaying Favicon on staging server

Modify the color of an Ionic button for a single button, rather than changing the color for all buttons

AngularJS enables the loading of directives dynamically, but sometimes encounters errors such as "Restricted URI access denied."

List on the Left Side with Scroll Capability

Determining the dimensions of form elements in an inline layout using Bootstrap 3.1

Using jQuery Datepicker, showcase two distinct datepickers on a single page

PersistJS callback function is malfunctioning

Wrapping content in flexbox and aligning it justified

Steps for compiling SCSS to CSS using Angular-CLI and moving it to the assets directory

Navigating through a PHP table, tracking your progress with a

Solutions for concealing the current div when clicking on a new div that reveals a fresh one

The flask application encounters a 404 error when trying to access the favicon.ico file

The browser is displaying the raw text data of a file rather than the formatted HTML content

Endless cycle of invoking functions in Angular.js

The concept of CSS Parent Elements refers to the relationship