Ensuring proper alignment between labels and input

How can I align a label and a range input field on the same line?

I have tried using display: inline-block, but it does not seem to work.

There doesn't appear to be any conflicting styles, and all sources indicate that this approach should be effective.

HTML

<form id="msform" method="post" action="quoteresult.php">
    <!-- progressbar -->
    <ul id="progressbar">
        <li class="active">Debts</li>
        <li>Assets</li>
        <li>Contact</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
        <h2 class="fs-title" style="margin-bottom: 0px;">What You Owe</h2>
        <h3 class="fs-subtitle">Your company's financial position</h3>
        <label style="display:inline-block;" for="overdraft">Overdraft:</label><input type="range" name="overdraft" id="overdraft" value=0 min=0 max=1000000 step="500" />
        <output for="overdraft">1</output>
        <label for="vat">VAT:</label>
        <input type="range" name="vat" id="vat" value=0 min=0 max=1000000 step="500" />
        <output for="vat">1</output>
        <label for="paye">PAYE:</label>
        <input type="range" name="paye" value=0 min=0 max=1000000 step="500"/>
        <output for="paye">1</output>
        <label for="corporationtax">Corporation Tax:</label>
        <input type="range" name="corporationtax" value=0 min=0 max=1000000 step="500" />
        <output for="corporationtax">1</output>
        <label for="tradecreditors">Trade Creditors:</label>
        <input type="range" name="tradecreditors" value=0 min=0 max=1000000 step="500"  />
         <output for="tradecreditors">1</output>
         <label for="rent">Rent:</label>
        <input type="range" name="rent" value=0 min=0 max=1000000 step="500" />
        <output for="rent">1</output>
        <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
        <h2 class="fs-title" style="margin-bottom: 0px;">Asset Values</h2>
        <h3 class="fs-subtitle">What are your assets worth?</h3>
        <label for="debtors">Debtors:</label>
        <input type="range" name="debtors" value=0 min=0 max=1000000 step="500" />
        <output for="debtors">1</output>
        <label for="fixtures">Fixtures:</label>
        <input type="range" name="fixtures"  value=0 min=0 max=1000000 step="500"/>
        <output for="fixtures">1</output>
        <label for="stock">Stock:</label>
        <input type="range" name="stock" value=0 min=0 max=1000000 step="500" />
        <output for="stock">1</output>
        <label for="vehicles">Vehicles:</label>
        <input type="range" name="vehicles" value=0 min=0 max=1000000 step="500" />
        <output for="vehicles">1</output>
        <label for="cash">Cash:</label>
        <input type="range" name="cash" value=0 min=0 max=1000000 step="500" />
        <output for="cash">1</output>
        <label for="plant">Plant/Machinery:</label>
        <input type="range" name="plant" value=0 min=0 max=1000000 step="500"/>
        <output for="plant">1</output>
        <label for="property">Property:</label>
        <input type="range" name="property" value=0 min=0 max=1000000 step="500" />
        <output for="property">1</output>
        <label for="other">Other:</label>
        <input type="range" name="other" value=0 min=0 max=1000000 step="500" />
        <output for="other">1</output>
        <input type="button" name="previous" class="previous action-button" value="Previous" />
        <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
        <h2 class="fs-title"  style="margin-bottom: 0px;">Personal Details</h2>
        <h3 class="fs-subtitle">We will never sell it</h3>
        <input type="text" name="fname" placeholder="First Name" />
        <input type="text" name="lname" placeholder="Last Name" />
        <input type="text" name="company" placeholder="Company Name" />
        <input type="text" name="phone" placeholder="Phone" />
        <input type="text" name="email" placeholder="Email" />
        <input type="button" name="previous" class="previous action-button" value="Previous" />
        <input type="submit" name="submit" class="submit action-button" value="Submit" />
    </fieldset>
</form>

CSS

/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0;}

html {
    height: 100%;
    /*Image only BG fallback*/
    background: url('http://thecodeplayer.com/uploads/media/gs.png');
    /*background = gradient + image pattern combo*/
    background: 
        linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), 
        url('http://thecodeplayer.com/uploads/media/gs.png');
}

body {
    font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
    width: 95%px;
    margin: 0px auto;
    text-align: center;
    position: relative;
}
#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 10px 15px;

    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;

    /*stacking fieldsets above each other*/
    position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
    display: none;
}
/*inputs*/
#msform input, #msform textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
    display:inline-block;}

#msform label {
    display:inline-block;
}

/*buttons*/
#msform .action-button {
    width: 100px;
    background: #27AE60;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
}
.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    counter-reset: step;
}
#progressbar li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 9px;
    width: 33.33%;
    float: left;
    position: relative;
}
#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
}
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1;
}
#progressbar li:first-child:after {
    content: none; 
}
#progressbar li.active:before,  #progressbar li.active:after{
    background: #27AE60;
    color: white;
}

.msform label, .myfields input {

}

.msform label {
  width:200px;
}
htmlcssformsinput

Answer №1

incorrect!

#msform {
text-align: center;
}

correct demonstration

<form id="msform" method="post" action="quoteresult.php">
<fieldset>
<div id="box">
<label for="overdraft">Overdraft:</label>
<input type="range" name="overdraft" id="overdraft" value=0 min=0 max=1000000 step="500" required/>
<output for="overdraft">1</output>
</div>
<div id="box">
<label for="vat">VAT:</label>
<input type="range" name="vat" id="vat" value=0 min=0 max=1000000 step="500" required/>
<output for="vat">1</output>
</div>
</fieldset>
</form>

styling

#msform fieldset{
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 10px 15px;

    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;

    /*stacking fieldsets above each other*/
    position: absolute;
}
#box{
    display:inline-block;
    background-color:green;
    width:100%;
    text-align:center;
    /*not is important*/
    margin-top:1px;
}
input[type=range] {
    -webkit-appearance: none;
    background-color: silver;
    width: 200px;
    border: 1px solid #ccc;
    width: 80%;
}

input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
    background-color: #666;
    opacity: 0.5;
    width: 10px;
    height: 26px;
}

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

Reactjs error: Invariant Violation - Two different nodes with the matching `data-reactid` of .0.5

I recently encountered a problem while working with Reactjs and the "contentEditable" or "edit" mode of html5. <div contenteditable="true"> <p data-reactid=".0.5">Reactjs</p> </div> Whenever I press Enter or Shift Enter to create ...

javascripthtmlreactjs

Adjust column content to fit width, instead of setting width to 100%

To create columns for the ul, I used flex-direction: column and flex-wrap: wrap. When the elements within the ul are split into multiple columns, each column takes on the width of the widest content in that column. However, if there is only one column, it ...

htmlcssflexbox

Is there a way to dynamically update an image in my CSS without having to refresh the page?

Is it possible to update an image in CSS dynamically using the value of console.log without reloading the page? function reply_click(clicked_id){ $(function() { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': ...

phpjqueryhtmlcssajax

Having trouble getting my list items to display on individual lines within the foreach loop. It just doesn't seem to be working as expected

In the event listener, I need to ensure that my list items within the forEach loop are not displaying on separate lines. This issue is causing a problem in a lengthy section of code. The goal is to update questions when an answer is clicked from a list. B ...

javascripthtmlcss

Toggle the visibility of an element by clicking a button

I have a table structured as follows: <tr> <td class="title">Title</td> <td class="body">Body</td> <td class="any">Any text</td> </tr> <tr> <td class="title">Title</td> ...

javascriptjquerycsshtml-table

What is the best way to create a gallery using Bootstrap 4?

I'm currently working on a project for my homework that involves replicating a car brand page, but I've hit a roadblock at this particular section. https://i.stack.imgur.com/0Zfr5.jpg My goal is to recreate the gallery using a .container with n ...

cssbootstrap-4html

"Create a notification pop-up in CSS that appears when a link is clicked, similar to

I am looking to create a model page that functions similarly to the inbox popup on Stack Overflow. When we click on the inbox icon, a small box appears with a tiny loader indicating messages or comments. The box then expands depending on the content inside ...

jqueryhtmlcssajax

Creating a visually appealing table in HTML or experimenting with a tableless design can greatly enhance your website's layout

Presenting data with headers in HTML has been a challenge for me. Below is the portion of the header I'm having difficulty with. Although I've successfully rotated the text, the issue I'm facing now is text overlap. Here's the code st ...

htmlcss

SVGs do not display on iPhones

Having some issues with my code - specifically, I have an SVG animation that seems to work on all devices except iPhones. I've been struggling to find a solution. Here is the code snippet for the SVG: <div class="contenuto-svg"> <svg vi ...

javascripthtmlcsssvg

Having trouble getting the .toggle() function with classList to work on one element, despite working fine on others

I've been struggling to apply a class to an HTML element when I click on another element of the page. Despite numerous attempts, it just doesn't seem to work for me. Let's take a look at my code: HTML Code: <div class="container&qu ...

javascripthtmljqueryonclicktoggle

Deactivate the image button when no image has been chosen from the input field

Is it possible to have the image button disabled when no image is selected in the input field? The button should be inactive if an image is not chosen. import { useState } from "react"; const CommentForm = ({ handleSubmit, submitLabel }) => ...

htmlcssreactjs

Slanted background div that adjusts to the screen size

I'm struggling to create a slanted angle div that remains responsive as the screen size changes. Unfortunately, my current layout breaks completely when the screen gets bigger. If you'd like to take a look at what I've been working on so fa ...

css

Attach the element to the bottom of the viewport without obstructing the rest of the page

My challenge is to create a button that sticks to the bottom of the viewport and is wider than its parent element. This image illustrates what I am trying to achieve: https://i.stack.imgur.com/rJVvJ.png The issue arises when the viewport height is shorte ...

javascripthtmlcss

initiate an animated sequence upon the initialization of the Angular server

Is there a way to launch a Netflix animation after my server has started without success using setTimeout? I don't want to share the lengthy HTML and CSS code. You can view the code for the animation in question by visiting: https://codepen.io/claudi ...

htmlcssangulartypescript

Is it possible to automate the process of clicking the "next" or "previous" button on a webpage after a video has finished playing?

Is it possible to automate clicking the "next" or "previous" button on a specific website? The buttons are not labeled as such but instead show the cartoon name and episode number. For example, increasing episode numbers indicate the "next" episode while d ...

pythonhtmlseleniumautomation

Is it possible to retrieve the complete file path in a form?

My goal is to retrieve a file using an input element of type "file". This element is located within a partial view, and I need to send it to the controller or request it there using "Request.Form["inputFile"];". However, this method only provides me with t ...

javascriptc#htmlasp.net-corerazor-pages

Slowly zooming background image

I've been searching all over the place but can't seem to find a clear answer on how to slowly zoom in the background image using CSS. Any help would be greatly appreciated. Currently, my code only zooms the text elements and not the background. ...

csszoomingtransform

Close button situated at the top-right corner overlapped by HTML/CSS styling

Currently attempting to position a button overlapping and extending outside of its parent div, much like the illustration provided. However, my current efforts result in the button being contained within the parent DIV. The visual reference below showcases ...

htmlcss

Enhance Bootstrap modals by automatically adjusting the background shadow mask when resizing or changing the content within the modal window

Incorporated within my bootstrap modal window is a form alongside a link that triggers the jQuery functionality of .slideToggle(). By interacting with this link, a concealed div expands. Consequently, the size of the modal popover becomes fluid. Upon click ...

javascriptjquerycssruby-on-railstwitter-bootstrap

Troubleshooting: Issues with Integrating Javascript and CSS into

I'm still new to this platform, so please correct me if I make any mistakes. My goal is to create a "task table" that allows users to edit existing tasks and add new ones. Thanks to the base template provided by Ash Blue, I've managed to program ...

javascriptjqueryhtmlcsshtml-table