What causes my CSS to be disrupted by a line break in one instance but not in another? (view demonstrations)

Question

What causes my CSS to be disrupted by a line break in one instance but not in another? (view demonstrations)

https://i.stack.imgur.com/bitod.png

In comparing this particular fiddle with another version of the same fiddle, the only variance is that in the second one, there is

</label><label for="address_zip" class="zip">

without a line break following the closing </label> tag.

https://i.stack.imgur.com/mr9b4.png

<label for="address_state" class="state">
    <span>State</span><input name="address_state" type="text" placeholder="CA" required="" class="field is-empty">
</label><label for="address_zip" class="zip">
    <span>ZIP</span><input name="address_zip" type="text" placeholder="94107" required="" class="field is-empty">
</label>

Dealing with line breaks can be quite tricky, and I've faced similar issues in the past.

Initially, I decided to accept the lack of a new line after the closing label tag in the HTML, even though it appeared messy.

However, I then discovered that another webpage (almost identical except for different CSS) that I had coded did not have this line break problem.

https://i.stack.imgur.com/7fCs1.png

Why might this be?

html css character-encoding char

Answer 1

Answer №1

Your form lacks block sections like div, resulting in a single long line layout. While you applied display: flex to the labels, it was not added to the fieldset, causing each label to be displayed on its own row.

By inserting line breaks between your labels, they are represented as spaces in the HTML view, thus extending beyond a single row.

To resolve this, consider restructuring the code as shown below:

<div>
  <label for="cardholder-name"> Name </label
  <input name="cardholder-name" type="text" placeholder="Jenny Rosen" class="question field is-empty personHead">
</div>

You may need to adjust some CSS for proper alignment, but following this format will ensure correct display.

Answer 2

Your form lacks block sections like div, resulting in a single long line layout. While you applied display: flex to the labels, it was not added to the fieldset, causing each label to be displayed on its own row.

By inserting line breaks between your labels, they are represented as spaces in the HTML view, thus extending beyond a single row.

To resolve this, consider restructuring the code as shown below:

<div>
  <label for="cardholder-name"> Name </label
  <input name="cardholder-name" type="text" placeholder="Jenny Rosen" class="question field is-empty personHead">
</div>

You may need to adjust some CSS for proper alignment, but following this format will ensure correct display.

What causes my CSS to be disrupted by a line break in one instance but not in another? (view demonstrations)

Answer №1

Similar questions

What is the best way to arrange list items in this manner?

My intention is to personalize the react-select component to suit my needs

Extract the entire div including all its elements and then transmit it using the PHP mail function

What is the best method for extracting individual JSON objects from a response object and presenting them in a table using Angular?

Steps for assigning an id to a newly created div within a parent div while in design mode

"Utilizing nested div tags for precise positioning within a parent div tag

Customize the X and Y position of the CSS background with specific degrees

What is the best way to customize the appearance of the material-ui select component using styled-components instead of material-ui classes in a React

Unable to showcase array JSON values on HTML using ng-model

Assistance requested with Javascript for an HTML dropdown menu

Having trouble with links, imported templates, and selections not functioning properly post file reorganization?

Arranging Nav Items in a Stack with Bootstrap 4

Ways to Get Rid of Line Beneath the Table

The button component in my React application is not functioning as expected, despite utilizing the useState and useEffect hooks

Emphasize a passage by clicking on a different section of text

Using the CSS property 'clear' creates a significant gap in the layout

Tips on customizing the appearance of the "time" input type

Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

Uncover hidden content by clicking a button with JavaScript

Is there a way to prevent the letters from moving when I hover over them?