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?

htmlcsscharacter-encodingchar

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.

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

Looking to replace a background image using javascript?

(apologies for any language mistakes) I have multiple divs with a common background image. I assigned them the same class and set the background image using CSS in style.css which worked perfectly fine. Now, I want to change the background image dynamical ...

javascriptcssbackground-image

Implementing specific CSS styles for images that exceed a certain size limit

Currently, I am facing a dilemma as I work on developing a basic iPhone website that serves as a port for my blog. The main issue I am encountering is the need to add a border around images above a specific size and center them in order for the blog to hav ...

javascriptiphonecss

Custom cellRenderer prevents Ag Grid's autoHeight and wrapText features from functioning properly

I've been attempting to adjust the formatting of a long cell value by wrapping the text. According to the documentation, setting autoHeight=true and wrapText=true works fine without any cellRenderer components. However, when using a cellRendererFramew ...

javascriptcssreactjsag-gridag-grid-react

Can I position two div elements next to each other, with one div partially offscreen, without utilizing display none or setting its width to zero?

Is it possible to position one div outside of the screen width while setting two divs side by side? I am looking to insert DIV2 above DIV1 with animation without adjusting its width or display. The goal is for DIV2 to enter the screen from the side alread ...

htmlcssanimationscroll

Showing two divs on top of an image inside a container

Hey there, I apologize for the messy title but I've been searching for an answer for a couple of hours now. <div id="lightbox"> <img src="blabla.png"> <div href="#" id="next" onClick="next(1)"></div> <div href=" ...

htmlcss

Avoid using <input oninput="this.value = this.value.toUpperCase()" /> as it should not convert the text displayed on the "UI", rather it should send the uppercase value

<input oninput="this.value = this.value.toUpperCase()" type="text" id="roleName" name="roleName" class="form-control width200px" [(ngModel)]="role.roleName"> Even though the UI is changing ...

htmlangulartypescript

What impact does the text-shadow property have on altering the color of hsla text?

I created a header that changes color to be slightly transparent with a black outline when hovered over (achieved using 4 text-shadows). However, I encountered an issue when trying to use hsla() to define the color. The color defaults to black with 100% o ...

htmlcsscolorshsl

Generate unique avatars with a variety of predefined image sets

Instead of solving my problem, I am seeking guidance on it: I have a project to create an Avatar maker in C# using a vast collection of categorized images. The concept is simple, but I lack experience in image manipulation through code, so I need some ad ...

c#cssasp.net-mvcimage-manipulationavatar-generation

Is there a way to ensure that this ajax code functions seamlessly with all types of HTML files?

Currently, I am facing a challenge with an ajax call that retrieves data from a database, which I need to load into an HTML file. The issue lies in the fact that I have various HTML files and I am unaware of their contents. Despite spending countless hour ...

javascripthtmlajax

Creating animated effects through Javascript and CSS triggered by user events

As a beginner in javascript and CSS, I am experimenting with creating a simple animation that adjusts the transparency of an image when triggered by an event. However, I am facing an issue where the animation only works every other time the function is cal ...

javascriptjqueryhtmlcssanimation

Is it possible to incorporate HTML tags within the <template> section of AIML files?

My goal is to create a simple bot using an AIML file. The idea is that I can input a question and the corresponding pattern will be returned from the file. For instance, I have this sample pattern in my AIML file: <category> <pattern>TEST& ...

pythonhtmlartificial-intelligenceaiml

I am experiencing issues with the visibility of my background on certain mobile browsers

Apologies for repeating a similar question, but I've already tried the solutions mentioned in other posts. On my webpage, I have a table with a background image set using CSS. html { width:100% height: 100%; margin: 0px; padding: 0px; border: none; } ...

htmlcssmobile

I am looking to specifically target and write to a particular line in a text file using PHP

What I am searching for: file.txt: Name: John email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abcdefghij">[email protected]</a> Here is my code snippet: <?php $myFile = "file.txt"; $txt = &apos ...

phphtmlfwrite

Tips for dynamically assigning unique IDs to HTML form elements created within a JavaScript loop

let count = 0; while (count < 4) { $('#container').append("<div><input type='textbox' class ='left' id='left-${count}'/><input type='textbox' class ='right' id=' ...

javascriptjqueryhtml

Unusual behavior being exhibited by the background in an HTML5 canvas

I have an 800 by 100 image for the background and I'm trying to extract sections from it (like a sprite sheet) in order to create a background. I believe this method is efficient and allows me to experiment and learn how to generate backgrounds in the ...

javascripthtmlanimationhtml5-canvas

Javascript animation functioning for a singular item within a list

As I continue practicing my skills in Javascript and HTML, I stumbled upon this intriguing list known as "item/adapter", similar to what we refer to as adapters in Android. While the process of adding them programmatically to my div is working smoothly, I& ...

javascriptjqueryhtmlajax

How can screen readers be alerted about freshly loaded content through ajax?

Whenever a user clicks on a button, I want to add more content to the page. The new content will be visually clear, but how can I ensure that screen readers can easily access it? I've come across two best practices that suggest additional steps may b ...

htmlajaxaccessibility

using css to pass arguments

I need help with a code that I have, here's the structure: <div className="site-col-1"> content 1 </div> <div className="site-col-2"> content 2 </div> Here is how the corresponding CSS file looks... .s ...

htmlcssreactjssass

What is the best way to showcase a photo selected using an HTML input within a div container?

My goal is to select a photo from a folder and display it on a webpage, but I have struggled to find a working solution. Can this be achieved using just basic HTML, CSS, and JS? I am new to web development, so please forgive me for any beginner questions. ...

javascriptjqueryhtmlcss

Issue with content not wrapping inside the body tag (apart from using float or setting body and html to 100

Why on earth is the body/html or .main div not wrapping my .container div's when the browser width is between 767-960 px?! This is causing horizontal scrolling and I am completely baffled. This should definitely be working! The only code I have is: ...

htmlcss