HTML allows for input elements to be displayed on the same line for a more

I'm attempting to align multiple input elements (~7) on the same line.

Below is the current code snippet:

<form>
  <b> One </b>
 <input type="number" style = "width: 5%; vertical-align:top" class="form-control"  name="quantity" value="1" >
</form>
<form>
  <b> Two </b>
  <input type="number" style = "width: 5%; vertical-align:top" class="form-control"  name="quantity" value="1" >
</form>
<form>
  <b> Three</b>
  <input type="number" style = "width: 5%; vertical-align:top" class="form-control"  name="quantity" value="1" >
</form>

The issue I encounter is that each input appears on a separate line instead of being aligned on the same line.

Edit: Additionally, I would like them to be spaced out in a way that allows the input elements to occupy the entire line. How can I achieve this?

htmlcss

Answer №1

Modify the presentation by eliminating the in-line styles. For instance, you can visit this link for an illustration: http://jsfiddle.net/ys1Lgj7e/

form {
    display:inline-block;
}

Answer №2

To enhance the structure of your code, ensure all input elements are contained within the same form. Additionally, consider utilizing CSS for styling purposes as this can streamline your code significantly.

For a practical demonstration, refer to the following example:

http://jsfiddle.net/xns87ak/

HTML

<form>
<input type="text" />
<input type="text" />
<input type="text" />
</form>

CSS

input {
display: inline-block;
width: 10%; 
vertical-align: top;
}

Answer №3

Make sure to set the display property of every form element to 'inline'

For example, in your HTML file:

<style>
form {
    display: inline;
}
</style>

You can also achieve this by adding it to your CSS file:

form {
    display: inline;
}

Alternatively, you can add the style inline for each form tag:

<form style="display: inline;">

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

I am encountering a problem with the $invalid property in AngularJS

Hey there, I've got a coding dilemma involving three number inputs, which I will refer to as the first input, second input, and third input for clarity. Here's the setup: <div> <form name="formOpenMax"> <div clas ...

javascripthtmlangularjstwitter-bootstrapvalidation

Adjust the position of an anchor tag when clicked with a fixed header

I found a similar question on stackoverflow and was able to derive my solution from there. However, I am facing a slight issue with it. In my case, I have a small fixed submenu at the top of the page. When I click on an anchor link, I want the scroll posi ...

javascriptjquerycsshtml

Using ES6 Template Strings for Template Binding in Angular 4

There's something I was able to easily accomplish in Vue, but for some reason, it doesn't seem to work in Angular 4: <div class="time-translate" [ngStyle]="{transform: `translate3d(${gridTranslateX}px, 0, 0)`}"> It appears that I may have ...

htmlstringangulartemplatesecmascript-6

Troubleshooting the Ineffectiveness of Setting the CSS Top Value with jQuery

I need to center text vertically within a DIV without using fixed pixel heights, only percentages. Here's my current setup: <div style="position:relative; width: 100%; height: 100%;"> <img src="images/thumb-member-placeholder.gif" alt="" ...

jquerycsscenter

Guide on modifying the directory layout of a compiled Vue project

I have a Vue project set up using the vue ui command. The package.json file contains the build script to compile the project into the dist folder. One issue I'm encountering is that the index.html file references js and css files like this: <link ...

htmlnode.jsvue.jsvuejs2babeljs

Executing the JavaScript function only a single time is what you're looking

I'm having trouble getting this script to work correctly on my website. It is supposed to trigger an alert when the specified id is in the viewport, but the issue I am encountering is that the alert keeps popping up repeatedly while the id is still vi ...

javascripthtml

Guide on creating a modal that displays Google search results underneath

As a newcomer in this field, I am currently working on implementing Google Autocomplete in my application. You can find a simple example of what I'm trying to achieve here. It's basically just a test with the Google Map functionality. However, I& ...

javascripthtmlangularjsgoogle-mapsautocomplete

Is there a way to show the value of a variable in several locations within my HTML <p> element?

Why is my variable value (test) only displaying in one instance in my HTML <p> tag? After correctly showing in the first place, it appears blank in the second. What mistake am I making? var name = document.querySelector("#NameInput").value; fu ...

javascripthtmlvariables

What is the process for eliminating an attribute using adblock?

Is it possible to eliminate specific attributes with an ad blocker on a webpage? I am specifically interested in removing the title attribute, as shown in this example: <p title="Free Web tutorials">W3Schools.com</p> After applying the ad blo ...

jqueryhtmlgoogle-chrome-extensionadblock

What causes the variance in style between the two div elements?

As I delve into the world of styled-components, I decided to create this component: import React from 'react' import styled from 'styled-components' const Row = styled.div` ` const Column = styled.div` flex: 0 0 50%; max-widt ...

cssreactjsbootstrap-4styled-components

Struggling to resolve a glitch in the mobile navigation that requires attention either through JavaScript or CSS coding

I'm having an issue with a mobile navigation menu I created. It's a simple hamburger icon that, when clicked, opens a fullscreen menu. The problem is that I want to prevent scrolling when the overlay is visible. I tried using this code: $(' ...

jquerycssmobilescrollnav

Adjust the transformation with jQuery

How can I apply the following value to the transform CSS property of a div tag: translate(-50%, -50%) translate(-100px, -300px)? I attempted to use the following jQuery command to set the value: jQuery('.content').css('transform', &ap ...

javascriptjquerycsstransform

Navigating on Blogger can be a tricky task when it comes to searching and

I recently added a Table to my blogger post, along with an input form for readers to easily search data. After finding the code on W3Schools (link here), I implemented it successfully. However, I am looking to make some improvements. Here is my question: ...

javascripthtmlcssblogger

From Java to the world of Javascript and HTML5 canvas

Can anyone help me with the Java to JavaScript/HTML5 translations for the following tasks: 1. Switching Activities/Layouts 2. Methods 3. Scanner Method (input via text box) I am currently working on a game using JavaScript and HTML5. Specifically, I am ut ...

javajavascripthtmlcanvas

Tips for toggling between 3 class names every 5 seconds indefinitely

Is there a way to continuously alternate between different class names on an element with a 5-second interval, like this: Initially, at 0 seconds, the element is assigned the class name 'banner-1' as shown in this code snippet: <div classname ...

javascripthtmljquery

Creating a website with a responsive design that perfectly adapts to different screen sizes, starting with my 1920x1080

've been working on designing a website using Dreamweaver CS6, and during this process, I encountered some challenges. Initially, I set everything up based on hard pixel values for div and image sizes, but realized that this caused severe breaks in th ...

htmlcssresponsive-designdreamweaver

Sending data from a modal form to an array in Angular

Struggling with integrating a bootstrap modal to collect user input and add it to an existing array of strings in Angular. It doesn't seem to be functioning properly. Any suggestions on what the issue might be? export class App { myform: FormGr ...

htmlangularbootstrap-modal

Creating a hyperlink within an @Html.LabelFor tag

In my current asp.net mvc project, I have a code snippet that generates a name like this - @Html.LabelFor(x => x.ReturnAirTemperature, new { style = "position: absolute;top: 310px;left: 18px;z-index: 10000;font-weight:bold" }) Here is the model associ ...

htmlasp.net-mvcrazor

Develop a circular carousel using React JS from scratch, without relying on any third-party library

I am looking to replicate the carousel feature seen on this website. I want to mimic the same functionality without relying on any external libraries. I have found several resources explaining how to achieve this. Most suggest creating duplicate copies o ...

javascripthtmlcssreactjs

Loading a local FBX file in Three.js without the need to upload it

When attempting to load files selected by users in an HTML input, I encountered a problem with the loader expecting a URL in Linux style. I have tried various methods such as using a blob as a URL object, providing raw data to the FBX loader, and even usin ...

javascripthtmlthree.js