Using CSS to align the second line of a label directly beneath the first line through indentation

I need to adjust the second line of the label to ensure it doesn't overlap with the starting point of the first line.

Below is my HTML code:

        <label for="ui-multiselect-edit-1" title="" class="ui-corner-all ui-state-hover">
    <input id="ui-multiselect-edit-1" name="multiselect_edit-selective" type="checkbox"   value="Cost-of something" title="">

    <span>Cost-driven / restructuring transformations</span>
</label>

This is the current appearance

Is there a way to modify it so that "transformations" does not overlap with "Cost"?

Thank you

htmlcsstext-indent

Answer №1

To align the input element to the left, you can use float:left and then modify the display of the span element to table. (see example)

label > input {
    float:left;
}
label > span {
    display:table;
}

Keep in mind that IE7 does not support the display:table property.

Another approach is to change the display of the span element to block and add a left margin equivalent to the width of the checkbox element plus padding. (view example)

label > span {
    margin-left:28px;
    display:block;
}

Answer №2

Here's an additional method to consider:

label[for] {
    white-space: nowrap;
}

label[for] input{
    vertical-align: top;
}

label[for] span
{
    display: inline-block;
    white-space: normal;
}

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

Tips for building a task list using JavaScript only

Is it possible to create a to-do list using only JavaScript in an HTML file with a single div tag? Here is my HTML file for reference: example Here is the structure of my HTML file... <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmllistdomevents

What is the process for adding text before and after a Bootstrap progress bar?

I want to customize the bootstrap progress bar with text at the beginning and end, like this: 5 star ----------------------------------------------- 70% Here is my attempt to achieve this: <link rel="stylesheet" href="https ...

csstwitter-bootstrapbootstrap-4

Executing a JavaScript function within the HTML body and passing a variable as an argument to the function

I recently created the following HTML code: <html> <title> Upload Infected File </title> <body> <header id = "header"> <h1 align="center">Upload Malware File</h1> <p align="center"> Pleas ...

javascripthtml

Modify content or display picture within accordion panel based on its identifier

In my view, I have a model representing a list of items. Each item has a unique ID, which is included in the H2 header tag. The details of each item are displayed in a div below the header. Initially, there is an image within the header that is set to disp ...

javascriptjqueryhtmlcssjquery-ui

I desire a smooth fade-in transition for the background image when the addClass function is

If the background color is set to header-fixed-position, the color will fade in. However, if the background is an image, the image will not fade in. Apologies for my lack of proficiency in English. Please refer to the sample code below. Try removing the c ...

javascripthtmlcssbackground-image

There seems to be a glitch with the email validation process

The validation issue in the email field is causing the is-valid effect to appear incorrectly. Although the email format is not valid (not 'gmail.com' format), a green outline and checkmark are displayed. How can I adjust this to work properly lik ...

htmlcssvalidationbootstrap-4

Why aren't jQuery events triggering following an AJAX request?

I have created a website that utilizes fading effects to transition between sections while loading new content. One of the features includes enlarging an image upon clicking, which is achieved through a jQuery event trigger. The issue I am facing is that ...

phpjavascripthtmljquery

What is the best way to create a sliding <nav> effect when a <div> is clicked?

Hello! I am looking for a solution that will cause the navigation contents to slide out from the left when the div class "bt-menu" is clicked. It should also slide back in to the left either when the div is clicked again or when anywhere outside of the nav ...

javascriptjqueryhtmlcss

Guide to extend the width of h1 container to fill the entire parent div

Here is a snippet of code showcasing parent and child elements along with their current styling main #main-content-wrapper div { padding: 0; margin: 0; } img { border-radius: 8px; } .overlay1 { position: absolute; top: 0; right: .1px; bo ...

htmlcssbootstrap-5

Are there any jQuery plugins available that can automatically resize images to fit within a div in a collage-style layout?

I'm interested in creating a layout similar to what I see on for my portfolio project. My goal is to showcase images that span the full width, occupy 1/4 or 1/2 of the div, and fade in smoothly. I envision them arranging themselves in a dynamic news ...

javascriptjqueryhtmljquery-uicss

Tips for adjusting column spacing in HighCharts

Looking for some advice on how to make a chart container scrollable and properly space the labels and bars within a parent container with fixed width and height. The goal is to ensure all labels are visible and bars are well spaced. Any suggestions or tips ...

jqueryhtmlcsshighcharts

Instructions on displaying the filename as the input for width and height dimensions

Running into an issue with Bootstrap 4 - whenever I try to upload a file with a long name, it ends up overflowing beyond the input field. ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

What is the best method to position images in the same way as seen in the screenshot

Any tips on aligning images shown in the screenshot? Please note that the images will be from the backend. https://i.stack.imgur.com/LnYLM.jpg I experimented with code to position images using top, right, left, and bottom properties, but it becomes cumb ...

javascripthtmlcssbootstrap-4

CSS not reflecting changes after the href of the <link> tag has been updated

Hey there, I'm a beginner in the world of programming and currently facing an issue that I need help with. My goal is to dynamically update the CSS of my webpage by using JQuery to change the 'href' value in the link tag. In order to test t ...

javascriptjqueryhtmlcssless

Expanding image in card to fit device width using Ionic

Currently utilizing the ionic framework and attempting to expand the image within the card to fit the device width. Referencing the example provided here, here is my current code progress. <div class="list card"> <div class="item item-avatar" ...

cssionic-framework

Displaying text on hover and showing a text box when a link is clicked using CSS and JavaScript

Hovering over the text will display "Edit," and clicking on it will reveal a text box. This function will be used to update content using ajax. HTML: <table> <thead> <tr> <th> Name </th> <th> Age </th> ...

javascripthtmlcssshow-hide

Creating a HTML element that functions as a text input using a div

I am encountering an issue with using a div as text input where the cursor flashes at the beginning of the string on a second attempt to edit the field. However, during the initial attempt, it does allow me to type from left to right. Another problem I am ...

htmlangulartypescript

Centering Images Using CSS Floats

I've got this HTML code featuring images and titles: <div class="container"> <div class="box"><a href="#" class="catname"><img src="image1.jpg" class="thumb"><p>Title 1</p></a></div> <div class="box" ...

htmlcss

Issues with cross-browser compatibility are arising in my jQuery code

Here is the code snippet I'm working with: function toggleLoader( display ){ if( display === 'show' ){ $('.overlay, .loader').css({ 'z-index' : '1000', 'display& ...

javascriptjquerycsscross-browser

Using Handlebars JS to incorporate HTML tags such as <li>, <br>, and more in your data

Is there a way to use handlebars to display a list of data in an unordered format, with "title" and "articles" as the main categories? The issue arises when some of the articles contain HTML tags, such as <a> for links. In my current code, instead of ...

javascriptjqueryhtmlhandlebars.js