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
Comments
Post a Comment