CODEWITHSUNDEEP
csshtmlinline
Kiran
Kiran

Reputation: 5526

showing label and input in same line using css

I have a html mark up with label and inputbox. However, for business reasons, I need to show the label and inputbox on sameline and hide the placeholdertext. The end result should look like the placeholder text is staying there. Example is here: http://jsfiddle.net/XhwJU/

Here is the markup for reference:

<!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 is 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 the jsfiddle, label and input show in separate lines. I want the label and input to show up on same line irrespective of the screenwidth. Label shall have a fixed size that allows it to fit contents in one line and the input shall occupy the rest of the screen width.

appreciate any help

Upvotes: 7

Views: 45346

Answers (1)

Marcio Mazzucato
Marcio Mazzucato

Reputation: 9295

I've done some changes in 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 understand better the reason of overflow:hidden in span you can read this: The magic of "overflow:hidden"

Upvotes: 11

Related Questions