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

Aligning vertical pills to the right using Bootstrap framework

Converting XML hierarchy into a flat HTML table using XSLT

Exploring outside iframe data

jQuery: Extracting text labels from checkboxes

Adjust the content to expand and occupy the entire height using Material UI cut-off Drawer

Discovering the meeting point where two dives converge

Customize your form fields with Bootstrap 3 input groups

Issues with Angular ngroute: controllers are not functioning properly

The color of the element remains unchanged even when hovering the cursor over it

What steps are involved in creating a table using Bootstrap framework?

Tips for disabling viewport resizer while accessing the Console panel in Chrome using Control+Shift+J

Position the image on the right side of several lines of text

What is the best way to redirect to the index page after successfully submitting a new record on the front-end? [Using Rubymine 2020.2.3, Ruby 2.7.2p137, and gem 3.1.2]

Tips for personalizing your Magento 2 theme

The div content is aligning at the baseline rather than the middle

The issue of JQuery UI Dialog remaining open even after triggering it through an Input focus event

Detecting whether a browser is capable of supporting dark mode

Internal VS External Stylesheets: What you need to know

How to style text in CSS with a numbered underline beneath

What steps should I take with my Android PWA manifest and service workers?