Having trouble locating the "forgot account" link below the password input field

Question

Having trouble locating the "forgot account" link below the password input field

While practicing website layout design, I attempted to emulate the Facebook landing page. Everything was going smoothly until I encountered an issue with the positioning of the “forgot account” link under the password input field. Strangely, it seems to affect the alignment of the email input as well. I'm puzzled by this unexpected behavior. Can anyone pinpoint what mistake I might be making?

Frequent website elements like headers and forms are defined in CSS below:

Custom grid system with responsive design:

html css

Answer 1

Answer №1

The reason why your "Forgot account?" link is not displaying correctly is because it is nested inside the password input's span.

If you format your HTML properly, it should look like this:

<span>
    <p>Email or phone</p>
    <input type="email" name="email-1" placeholder="Email">
</span>
<span>
    <p>Password</p>
    <input type="password" name="password1" placeholder="password">
    <span>
        <input type="submit" value="Log-in"/>
    </span>
    <div>
        <a href="#">Forgot account?</a>
    </div>
</span>

To fix this issue, simply rearrange your elements as follows:

<span>
    <p>Email or phone</p>
    <input type="email" name="email-1" placeholder="Email" />
</span>
<span>
    <p>Password</p>
    <input type="password" name="password1" placeholder="password" />
    <input type="submit" value="Log-in"/>
</span>
<div>
    <a href="#">Forgot account?</a>
</div>

By making these adjustments, your HTML layout will render correctly. Also, don't forget to close your input tags for proper validation.

Answer 2

The reason why your "Forgot account?" link is not displaying correctly is because it is nested inside the password input's span.

If you format your HTML properly, it should look like this:

<span>
    <p>Email or phone</p>
    <input type="email" name="email-1" placeholder="Email">
</span>
<span>
    <p>Password</p>
    <input type="password" name="password1" placeholder="password">
    <span>
        <input type="submit" value="Log-in"/>
    </span>
    <div>
        <a href="#">Forgot account?</a>
    </div>
</span>

To fix this issue, simply rearrange your elements as follows:

<span>
    <p>Email or phone</p>
    <input type="email" name="email-1" placeholder="Email" />
</span>
<span>
    <p>Password</p>
    <input type="password" name="password1" placeholder="password" />
    <input type="submit" value="Log-in"/>
</span>
<div>
    <a href="#">Forgot account?</a>
</div>

By making these adjustments, your HTML layout will render correctly. Also, don't forget to close your input tags for proper validation.

Having trouble locating the "forgot account" link below the password input field

Answer №1

Similar questions

What is the best way to automatically show scrollbars when a page loads using JavaScript?

Having trouble with styling the buttons in the collapsed state of the Bootstrap 4 navbar

Leveraging Angular 2 directives in TypeScript to bind a value from a custom control to an HTML control

How to customize Django form without using bootstrap styling

sscanf disregarding the "&" symbol and continuing scanning past its intended position

Is there a way to pick up text where a div element ends using Bootstrap or HTML?

The art of organizing dates and times

Using bracket notation with aframe is not supported

Avoid displaying pop-up repeatedly (using current library)

Creating formatted code blocks within my HTML document

What is the best way to continuously run a re.search for new data?

Optimizing White Space in Firefox

`Text area label in Bootstrap not aligned properly`

hide the side menu automatically - wordpress

Tips on resetting the position of a div after filtering out N other divs

Tips for creating a unique custom UI headline using ReactJS, CSS, and bootstrap

Why are certain pages in Django not fully utilizing CSS styles?

Does the message "The reference 'gridOptions' denotes a private component member in Angular" signify that I may not be adhering to recommended coding standards?

Tips for adjusting the position of the second child in my navigation menu using CSS

Ways to enhance the visibility of the active menu item background