Aligning Checkbox Labels for Web Forms

Can an image convey more than a thousand words?

I'm looking to align the second (and following) lines with the first one. Any suggestions?

Html stands for

<input><span>text</span>

Answer №1

.thing input { float: left; }
.thing label { display: block; margin-left: 2em; }

<div class="thing">
    <input type="radio" id="potato"/>
    <label for="potato">When text spans multiple lines, proper alignment is key.</label>
</div>

Answer №2

I encountered similar issues and came up with a solution. The main challenge was dealing with checkbox list items that had text spanning multiple lines.

HTML

<div class="checkboxlist">
    <ul>
        <li>
            <asp:CheckBox ID="CheckBox1" runat="server" Text="This is a lengthy checkbox option in an unordered list, causing the text to wrap onto another line while maintaining alignment." />
        </li>
        <li>
            <asp:CheckBox ID="CheckBox2" runat="server" Text="Here's another long checkbox option in an unordered list, wrapping onto another line but staying aligned." />
            <div>
                <br /> Additionally, some extra information that isn't part of the checkbox also aligns correctly.
            </div>
        </li>
    </ul>
</div>

CSS

div.checkboxlist ul li { margin: 7px 0px; }
div.checkboxlist ul li input { width: 15px; display: block; float:left;}
div.checkboxlist ul li label { padding-left: 28px; display: block; }
div.checkboxlist ul li div { margin-left: 28px; clear: both; font-size: .9em; }

For more in-depth information, please refer to my post at: Aligning a List of Checkboxes with Text that Wraps

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

When converting the .html file to a .php file, the CSS file fails to be linked correctly

The issue I'm facing seems to be specific to the index.html file. The CSS that functions properly with an html extension suddenly stops working when the extension is changed to php. Upon inspecting the reference link in both cases, I noticed that when ...

Trouble with retrieving data from localStorage

On my webpage, I have set up multiple input fields where users can enter data. When they click a button, the data from these inputs is stored inside <span>...</span> elements (the intention being that the text remains visible in these <span& ...

CSRF validation did not pass. The request has been cancelled. The failure occurred due to either a missing or incorrect CSRF token

Upon hitting the submit button in the login form, I encountered the following error message: Forbidden (403) CSRF verification failed. Request aborted. CSRF token missing or incorrect. settings.py MIDDLEWARE = [ 'django.middleware.security.Secur ...

Setting the title of a document in Angular 5 using HTML escaped characters

It seems like a simple problem, but I can't seem to find an easy solution. Currently, I am using the Title service to add titles to my documents and everything is working fine. You can check out the documentation here: https://angular.io/guide/set-doc ...

Bootstrap implementation for personalized notifications

I am utilizing bootstrap notifications to display important messages to my users. Within my code, there is a DIV element named <div class="notifications bottom-right"></div> Theoretically, the library should be handling the JavaScript. I ha ...

No translation or compiling of SCSS/SASS to CSS available

As a beginner Sass user, I am working on mastering the SMACSS hierarchy and incorporating it into my project using Brackets. However, I have encountered an issue with mapping the main.scss file to the main.css file even though it compiles successfully via ...

Issue with fortawesome icon: relative and absolute positioning not functioning as expected

I have utilized a diamond symbol from the Fort Awesome icon collection and noticed that when I target the i tag in my CSS, the icon becomes highlighted (see screenshot attached). However, I am encountering issues with relative and absolute positioning not ...

Adjusting the "width" of a widgets within a particular <td> element on WordPress

Recently, I was given the task of modifying a mortgage calculator widget on a WordPress site to enlarge its appearance. Specifically, I am attempting to adjust the #MLCalcFormLoanForm table tbody tr td where one of the individual tags is set with a width ...

Tips for looping through an HTML document using Python to extract information from Wikipedia

I am working on developing a tool to extract data from the Wikipedia API. Within an XML file named wikiepedia.html, I have several links that I want to parse through line by line in order to retrieve information which can then be formatted into JSON. The ...

Issue with CSS: Dropdown menu is hidden behind carousel while hovering

I'm struggling with adjusting the position of my dropdown list. It keeps hiding behind the carousel (slider). When I set the position of the carousel section to absolute, it causes the navbar to become transparent and the images from the carousel show ...

The Angular method for retrieving the child's ID when it is clicked

As a newcomer to Angular 1.0 with a background in jQuery, I am facing the following scenario: Let's imagine we have the following HTML structure : <div id="filters"> <div id="filter1">Filter 1</div> <div id="filter2"> ...

Is it possible to add a click event to a table row that contains an input checkbox, without interfering with the ability to click the checkbox itself?

I have a table: <table> <tr> <td>Something</td> <td>Something Else</td> <td><input type='checkbox' value='clickme' id='yes'></td> </tr> When a user ...

What steps can be taken to resolve the error message "AttributeError: 'WebElement' object does not have the attribute 'find_element_class_name'?"

try: main = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "main")) ) articles = main.find_elements_by_tag_name("article") for article in articles: header = article.find_element_c ...

The 3D card flipping animation is dragging on for an eternity

I'm experiencing a delay in triggering my 3D Card Flip animation on click, and I can't figure out why it's happening. If you want to see an example, please scroll down and click on any black and white picture here: Here is the code I' ...

What is the proper way to include a parameter in an ASP onclick function within a table row?

Below is a table row declared within a listview: <tr onclick="<%= _jsPostBackCall %>;" /> When calling a postback method on the backend, I need to retrieve the tr index: public void RaisePostBackEvent(string eventArgument) { ...

I am experiencing an issue where the CSS file in the wwwroot directory does not update when I make changes to the code in ASP.NET MVC

Here is a link to my CSS file: Click here for image description This is how the file looks when built (no changes): Click here for image description Occasionally, running "clean-solution" and "build-solution" fixes the issue, but it's not working no ...

Methods for inserting text into a WebBrowser Document without retrieving any Attributes in vb.net

Is it possible to retrieve text from a WebBrowser Document in vb.net without retrieving any attributes?! For example: <h1>text here</h1> Or: <h1 name="anything">text here</h1> How can I extract the "text here" within the <h1 ...

Resolving Problem of Jumping When 'invalid-feedback' Appeared in Bootstrap 4 Input

There is an input with an add-on and a customized focus that includes a '%' at the end of the field, which is working fine. However, there is a small issue where the error message causes the input to jump when clicked in or out. To see the issue ...

Emphasize the interactions within the table cells based on their corresponding column and row

I'm looking to achieve a specific interaction in my Angular Material table. I want to highlight the table cell interactions with column and row by extending the highlighting up to the column header and left to the row header. Is this something that ca ...

CSS animations using keyframes to continuously move text from left to right

I've been experimenting with text animation, and I've noticed that at the end of the animation, there is a sudden transition cut. What I'm aiming for is to have the text continuously shifting. text { animation: scrollText 5s ...