7

ラベルと入力ボックスを備えた 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>

</p>

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

.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 行に収めることができる固定サイズを持ち、入力は画面幅の残りを占める必要があります。

どんな助けにも感謝します

4

1 に答える 1

11

私はあなたの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>

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

于 2012-06-25T22:42:08.343 に答える