Aligning the text next to a checkbox to ensure a clean and

When the float:right property is applied, the text to the right of the checkbox appears in two lines. If the float:right property is not used, one line comes next to the checkbox and the rest starts below it.

Below you can find the code snippet including the float property:

input[type=checkbox] {
  margin-top: 10px;
  margin-right: 10px;
}

label {
  width: auto;
  float: right;
}
<input type="checkbox" name="optIn" value="Y">
<label for="ext-comp-1035">I would like to receive email from you. By checking the box you agree that you have read the Privacy Policy and Terms of Use</label><br>

https://i.sstatic.net/HiTQ6.png

https://i.sstatic.net/2GwKQ.png

htmlcssjsp

Answer №1

Combine your input and label within a single container and utilize the flex property 

<div style="display:flex">
    <input type="checkbox" name="optIn" value="Y" style="margin-right:10px;">
    <label for="ext-comp-1035">I am interested in receiving emails from you. By checking this box, you acknowledge that you have reviewed the Privacy Policy and Terms of Use</label>
    </div>

Answer №2

To easily achieve alignment, consider using the CSS properties display: flex; and align-items: center;. Check out the example code below:

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.align-items-center {
  align-items: center;
}

.input-checkbox {
  margin-right: 10px;
}
<div class="d-flex flex-row align-items-center">
<input type="checkbox" name="optIn" value="Y" class="input-checkbox">
<label for="ext-comp-1035">I would like to receive email from you. By checking the box you agree that you have read the Privacy Policy and Terms of Use</label><br>
</div>

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

Issue with setting innerHTML of element in AngularJS app upon ng-click event

Look at this block of HTML: <div class="custom-select"> <div class="custom-select-placeholder"> <span id="placeholder-pages">Display all items</span> </div> <ul class="custom-select- ...

javascripthtmlangularjsinnerhtml

Using Angular and ASP.NET for image uploading functionality

Trying to source the image from the PC and upload it into the database as "Images/aaa.jpg". I am relatively new to Angular and have attempted an example that did not work for me. I have been stuck on this issue for almost 3 days trying to find a solution. ...

c#htmlasp.netangularjs

Enhancing Bootstrap Carousel with various effects

My exploration of the web revealed two distinct effects that can be applied to Bootstrap Carousel: Slide and Fade. I'm curious if there are any other unique effects, such as splitting the picture into small 3D boxes that rotate to change the image? ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

The never-ending scroll feature in Vue.js

For the component of cards in my project, I am trying to implement infinite scrolling with 3 cards per row. Upon reaching the end of the page, I intend to make an API call for the next page and display the subsequent set of cards. Below is my implementatio ...

htmlcsstypescriptvue.jsinfinite-scroll

What is the process for adding a box shadow beneath my header?

I am currently attempting to add a box shadow under my header, similar to the design featured in the project mockup at https://github.com/RaghavMangrola/the-brighton-times. After trying to implement the following CSS property and value: .header { ...

css

Expand your view to avoid overflow

Take a look at this image When viewing with standard resolution (1386 x 788), everything looks fine. However, when attempting to zoom out in Internet Explorer, things get messy: Why does this happen and how can it be fixed? Here's the code causing t ...

htmlcss

Identify and forward to the mobile-friendly version of the site

I am currently working on a website that requires separate files for mobile view as the html layout poses challenges in making it responsive. My goal is to find code that can detect if the user is accessing the site from a mobile device, and automatically ...

javascriptjqueryhtml

Tips for displaying a table with a button click

I am struggling to figure out how to embed a table inside a button in order to display the table when the button is clicked and hide it when clicked again. Below is the code I have been working with: function toggleTable(){ document.getElementById ...

javascripthtmlcss

Angular Appreciation Meter

Looking to create a rating system using Angular. The square should turn green if there are more likes than dislikes, and red vice versa (check out the stackblitz link for reference). Check it out here: View demo I've tried debugging my code with con ...

htmlangulartypescript

Having a fixed bottom line bar that does not affect the length of the div when

I am working on creating an input field with a rounded bottom line. My goal is to make the main div expand or contract based on the length of the input, with specified minimum and maximum lengths. https://i.sstatic.net/REqld.png Instead of taking up the ...

htmlcssreactjstailwind-css

The jQuery placeholder plugin encounters an error stating 'jQuery is not defined'

Having an issue on this specific page where I keep encountering a 'jQuery is not defined' error in both Chrome and IE because of the jQuery placeholder script. The declaration of jQuery comes before the plugin script. Checked for any conflicts ...

javascriptjqueryhtml

Place one div element with a float property set to AUTO, followed by another div element that expands to

I am trying to place two divs inside another. The inner divs are floated, with one having a "width: auto;" and the other needing to fill the remaining space. I have searched for examples, but they all involve at least one fixed width element, which is not ...

htmlcss

What is the best way to retrieve a single piece of data from a row within an HTML table?

I created a table to keep track of the products in each user's shopping cart. Within each row of the table, there is a button that allows the user to remove a single product from their cart. Below is the HTML code snippet for this functionality. < ...

javahtmljspspring-mvcjstl

Choosing different elements using identical classes in JQuery

Struggling with a coding problem that seems like it should be an easy fix, but can't quite figure it out. The HTML code I have is as follows: <section class="actualite"> <div class="actualite-text"> <h3 class="title"&g ...

javascriptjqueryhtmlcss

Web site designed with the aesthetics of Office 2007 aesthetic

Can anyone guide me to a website template that resembles the design of Office 2007? I'm hoping to find one that has similar colors, hover effects, and overall aesthetic. ...

htmlcss

Is it possible to translate the content of the page into English and French simply by clicking on the designated buttons?

As I dive into working with knockout, I am still in the learning process. Currently, I have a dropdown code where selecting English translates the entire page to English and selecting French translates it to French without any issue. I believe this functio ...

javascripthtmlknockout.jsdata-bindinginternationalization

Leveraging JavaScript variables to dynamically update content within designated <div> elements across various pages on JQuery Mobile framework (Issue with second button click remaining inactive)

My webpage consists of a header, navbar, and footer that remain 'static' across all pages. I am attempting to change only the 'main/contents' part of my webpage when a navigation button is clicked. The first click on a nav-button works ...

javascriptjqueryhtmljquery-mobile

Animating the change in width of a column using Bootstrap 4

I currently have two columns structured like this: <div class="container"> <div class="row"> <div class="col-9"></div> <div class="col-3"></div> </div> </div> Through Angular, I am ch ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Steps for making a website with password protection

I'm currently working on building my website and I want to implement password protected JavaScript code for access. Will I also need to update my CSS, or is it just a matter of adjusting my HTML code? ...

javascripthtmlcss

What is the most efficient way to choose the correct value from an HTML drop-down list based on the name and ID that is provided?

Is there a way to automatically select the value in a drop-down list from HTML based on the name and ID I receive? I need this functionality to edit information from the database. I've tried using this code but it's not displaying the correct op ...

htmltwitter-bootstrap