web-dev-qa-db-ja.com

cssを使用してラベルと入力を同じ行に表示する

ラベルと入力ボックスでhtmlマークアップがあります。ただし、ビジネス上の理由から、ラベルと入力ボックスを同じ行に表示し、プレースホルダーテキストを非表示にする必要があります。最終結果は、プレースホルダーテキストがそこにとどまっているように見えるはずです。例はここにあります： http://jsfiddle.net/XhwJU/

参考のためのマークアップは次のとおりです。

<!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>

使用されるスタイルは次のとおりです。

.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;
}​

Jsfiddleでわかるように、ラベルと入力は別々の行に表示されます。画面幅に関係なく、ラベルと入力を同じ行に表示したい。ラベルは、コンテンツを1行に収めることができる固定サイズであり、入力は画面幅の残りの部分を占める必要があります。

助けてくれてありがとう

csshtml5inline
7
Kiran

私はあなたのCSSにいくつかの変更を加えました、そして私はあなたが望むものを手に入れたと思います、 ここに例があります そしてHTMLと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>

spanのoverflow:hiddenの理由をよりよく理解するには、次のように読むことができます。 "overflow：hidden"の魔法

10
Marcio Mazzucato