Geek Answers Handbook

Display label and input on one line using css

I have an html tag with a label and an input box. However, for business reasons, I need to show the shortcut and input field on Sameline and hide the placeholder text. The end result should look like the placeholder text is stored there. Example here: http://jsfiddle.net/XhwJU/

Here is the link for the link:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Test Page</title> </head> <body> <h1> test </h1> <div class="inputdata"> <label for="AccessCode"> Access Code: </label> <div style="display:inline"> <input type="text" name="accessCode" id="AccessCode" value="" placeholder="" /> </div> <div class="clear"></div> </div> </body> </html>

Here are the styles used:

 .inputdata { border: thin solid gray; padding: 0.1em; margin: 0.1em; vertical-align: middle; } div .inputdata label { width:auto; float:left; color: gray; line-height: 2; padding-top: .4em; } input[type='text']{ overflow:hidden; line-height: 2; box-shadow: none; border:none; vertical-align: middle; background:none; width:100%; } .clear { clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px; }​

As you can see in jsfiddle, the shortcut and input are displayed on separate lines. I want the label and input to appear on the same line regardless of the width of the screen. The label must have a fixed size, which allows it to place the content on one line, and the input should occupy the rest of the screen width.

appreciate any help

+7
source share
1 answer

I made some changes to your CSS, and I think I got what you want, here is an example and below HTML and CSS.

CSS

 div.inputdata{ border:thin solid gray; padding:0.1em; margin:0.1em; } div.inputdata label{ float:left; margin-right:10px; padding:5px 0; color:gray; } div.inputdata span{ display: block; overflow: hidden; } div.inputdata input{ width:100%; padding-top:8px; border:none; background:none; } .clear { clear: both; }

HTML

 <h1>test</h1> <div class="inputdata"> <label for="AccessCode"> Access Code: </label> <span><input type="text" name="accessCode" id="AccessCode" value="" placeholder="" /></span> <div class="clear"></div> </div>

To better understand the cause of overflow:hidden in span , you can read this: Overflow: Hidden Magic

+10
source

More articles:


All Articles