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

The issue persists with the customized Bootstrap carousel featuring thumbnails

By combining http://codepen.io/srkimir/pen/mGbrf and http://codepen.io/transportedman/pen/NPWRGq , I successfully created a fading carousel with thumbnails similar to the one in http://codepen.io/kikibres/pen/gpZoXz . However, when trying to implement ...

jquerycsstwitter-bootstrapcarouselthumbnails

Image broken on default bootstrap navbar

On my computer where I am developing a Ruby on Rails app, I have a relative link to an image. To customize the style, I am using Bootstrap and have used their code to source the image for the top left brand placement. You can view the Bootstrap link here. ...

htmlcssruby-on-railstwitter-bootstrap

Troubination of Bootstrap CSS is causing issues on Floating Action Menu

I've implemented a Floating Action Menu using JQuery and CSS: HTML: <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <div id="hamburger" class="waves-effect waves-light"> <div id="wrapper"> <span ...

jquerycssbootstrap-4floating-action-button

I’m having trouble getting my home.html page to render in Spring Boot

https://i.sstatic.net/ovw5z.jpg This image perfectly encapsulates the essence of my code and project structure. I am encountering an issue where I cannot return the home.html file located in the static folder. I have tried specifying it as 'home&apos ...

htmlspring-bootcontroller

Using jQuery functions like closest(), find(), and children(), it is possible to target and retrieve the sibling of a specific parent

Having trouble determining the URL of a using .closest, .find and potentially other jQuery methods. The webpage structure is as follows: ul ul ul.good li ... li li <a href="/findme">findme</a> ul . ...

jqueryhtmlcssfindparent-child

bespoke design picture holder

Is it possible to create a custom-shaped image container without using <div />? I encounter an issue when trying to add corners on top of the #content-box as shown in this screenshot: . The corner images only cover half of the block element, with th ...

csshtml

Escaping an equal sign in JavaScript when using PHP

I am currently working on the following code snippet: print "<TR><TD>".$data->pass_name."</TD><TD><span id='credit'>".$data->credit_left."</span></TD><TD><input type='button' val ...

phpjavascripthtmlajax

What is the proper way to specify the type for a <video> element reference in React when utilizing Typescript?

I have been experimenting with controlling the play/pause state of a video in React.js using ref's. My code functions correctly but I am encountering tslint errors that I am currently trying to diagnose: function App() { const playVideo = (event:a ...

htmlreactjstypescriptdomuse-ref

What steps do I need to take to make sure the Google font I downloaded is functioning properly in my React project

I have encountered an issue with using a Google font in my project... After downloading the font, I included the following CSS code: @font-face { font-family: "Work Sans"; src: local("Work Sans"), url(../src/Fonts/Work_Sans/Wor ...

cssreactjsgoogle-fonts

php: form is not being processed accurately

Hello everyone, I am new to coding and currently working on creating a basic temperature converter. The idea is simple - you input the data and select the filter through which you want to process the data. However, I am facing an issue with processing th ...

phpformsselect

Showcase a sizable picture broken down into smaller sections

I am interested in creating a mapping application similar to Google Maps that can asynchronously load images from the backend. I am seeking guidance on where to begin and how to proceed in this endeavor. The ultimate goal is to have the image displayed w ...

javascriptjqueryhtml

What are some ways to create a traditional HTML form submission and incorporate jQuery solely for the callbacks?

Given that my page consists solely of a simple "name and email" registration form, I see no reason why I shouldn't stick to the traditional approach: <form action="/Account/Register/" method="POST" id="registration-form"> <fields ...

javascriptjqueryhtmlajaxforms

Styling an HTML table with two columns: one column displaying an image, and the other column containing information related to the image

I have a concept that involves creating a table with 2 columns. The left column will feature an image, while the right column will display data about the image in 6 rows. ________________________________ | |_______________| | | ...

phphtmlcsshtml-table

Unable to utilize the .keyCode method within a query selector

Trying to utilize .keyCode in JavaScript to identify a pressed key, but the console consistently displays null after each key press. Below is the relevant CSS code: <audio data-key="65" src="sounds\crash.mp3"></audio> ...

javascripthtmlcss

Sending Angular Material Select Option Value for Submission

HTML: <form id="reg" name="reg" enctype="application/x-www-form-urlencoded" action="http://api.phphotspot.com/v-2/client-register" method="post"> <md-input-container class="md-block"> <label for="country">Country</label&g ...

javascriptphphtmlangularjsangular-material

A guide on how to insert content into a text area using a drop-down menu choice

I'm a total beginner at this. Is it possible to use JavaScript to automatically fill in a text area on an HTML form based on what is selected in a drop-down menu? If so, can someone please explain how to achieve this? ...

javascripthtml

Separating Angular code into distinct components

My page contains two input fields: one is for email and the other is a text field. Currently, everything is functioning correctly. However, I now want to split the component into two parts. For example, I have a 'basic-info' component currently. ...

angularinputcomponents

What could be causing all of my Bootstrap accordion panels to close at once instead of just the one I selected?

When implementing Bootstrap accordions in my projects, I encountered an issue where closing one accordion would cause the others to also close when reopened. To address this problem, I utilized the collapse and show classes in Bootstrap to enable users to ...

javascripthtmlcssbootstrap-5accordion

What is the best way to split a jQuery tab into four equally sized divs?

I am currently working with jquery tabs and within one of the tabs, I have 4 google charts each enclosed in a separate div. My goal is to position each div in a different quadrant of the tab area (north, south, east, and west of the screen). Currently, my ...

jqueryhtmlgoogle-visualizationjquery-tabs

What steps should I take to establish an efficient folder organization system for a website utilizing HTML, CSS, and Javascript with Twitter Bootstrap?

After cloning the latest release of Twitter Bootstrap using Git with the command 'git clone git://github.com/twbs/bootstrap.git', I am in the process of creating an HTML/CSS site utilizing Bootstrap. Upon reviewing this answer on Stack Overflow ( ...

csshtmltwitter-bootstrap-3