html - Need CSS to make all fields in-line when shown within a browser -

People are just a simple problem with CSS. I want my form field to be in-line. I need CSS to preview my field in the browser's line. For example:

Input type: Color ...... ............. field goes here

Input type: Date ............... ..... field goes here

Input type: Date time ........ Field goes here

Input type: datetime-local ..... field goes here and so on . ..

Input type: Email ................... field goes here and so on ... < / P>

Input Type: Month

Any support will be greatly appreciated! Thank you.

You can do so many ways here are some examples:

Example:

  & lt; Ul & gt; & Lt; Li & gt; & Lt; For label = "color" & gt; Color: & lt; / Labels & gt; & Lt; Input id = "color" type = "text" value = "color" /> & Lt; / li & gt; & Lt; Li & gt; & Lt; Label = "date" & gt; Date: & lt; / Label & gt; & Lt; Input id = "date" type = "text" value = "date" /> & Lt; / li & gt; & Lt; / Ul & gt;   
 CSS: ( requires very little CSS )  
  ul {padding: 0; Margin: 0; List-style: none; } Labels {Width: 40px; display: inline-block; }   
  
  Example 2:   
  No other way with CSS (Browser Let's work)   
  & lt; Div & gt; & Lt; Label = "date" & gt; Date: & lt; / Label & gt; & Lt; Input id = "date" type = "text" value = "date" /> & Lt; / Div & gt; & Lt; Div & gt; & Lt; label = "date" & gt; Color: & lt; / Label & gt; & Lt; Input id = "date" type = "article" value = "color" /> & Lt; / Div & gt;  
  Note:   
 You will need to add the width of the label to align the field (< Em> as example 1 ). However, this (IMO) for HTML (code) is a simple / more meaningful way to force line breaks after each "label input group".  
 This format is similar to most bootstraps, which I like most, in most cases seems most meaningful. Although it depends on the content / data