1

私はこの一見簡単な問題に頭を悩ませています。おそらく誰かが助けてくれるでしょう。画像のように、1行に水平に積み上げられたラベル付きの任意の量の入力が必要です。

ここに画像の説明を入力

4

4 に答える 4

0

一般に、「残りのスペースを占有する」（入力ボックスなど）場合は、次の3つのオプションがあります。

  1. Flexboxは理想的ですが、まだ広くサポートされていません。
  2. KevinReidsの回答で説明されているようなテーブル
  3. 以下の例で、個別のブロックフォーマットコンテキストを確立します

HTML

<div class="container">
    <div class="field">
        <label for="in1">Label</label>
        <div><input type="text" id="in1"></div>
    </div>
    <div class="field">
        <label for="in2">Label</label>
        <div><input type="text" id="in2"></div>
    </div>
    <div class="field">
        <label for="in3">Label</label>
        <div><input type="text" id="in3"></div>
    </div>
</div>​

CSS

.container {
    padding: 20px;
    background: #999;
    overflow: hidden; /* for float containment */
}

.field {
    padding: 4px;
    background: #fff;
    border: 2px solid #999;
    float: left;        
    width: 33%;
    -webkit-box-sizing: border-box; /* 33% effective width */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

label {
    float: left;
    width: 100px; /* fixed width of label */ 
}

.field div {
    overflow: hidden; /* create a new Block Formatting Context */ 
}

/* inputs fill the new BFC */
input {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
​

追加されたレイアウト要素は1つだけです。これは、をラップするdivになりinputます。これは、たとえあなたが彼にそうするように言ったとしてもinput、ブロック要素のように振る舞いたくないからです。

フィドル： http： //jsfiddle.net/RqzJC/

于 2012-11-07T09:44:42.617 に答える
0

このタイプの古典的な「GUI ウィジェット レイアウト エンジン」レイアウトの最適なオプションは CSS 3フレックスボックス機能ですが、ブラウザーのサポートはまだ十分に一貫しておらず、私はそれを使用することをお勧めします.

それがなければ、柔軟な「スペースを埋める」レイアウトには、通常、テーブル レイアウトが必要です。CSS のおかげでdisplay、テーブルを HTML テーブルとして記述する必要は特にありません。次の例は、サンプル画像に似ています。

<html><head>
<title>example</title>
  <style type="text/css">
    ul.myform { display: table; width: 100%; margin: 0; padding: 0; border-collapse: collapse; }
    .myform li { display: table-cell; border: .1em solid gray; }
    .myform li > * { display: table; width: auto; margin: .4em; }
    .myform label { display: table-cell; width: 1%; padding-right: .4em; white-space: nowrap; }
    .myform input { display: table-cell; width: 100%; }
    .col1 { width: 33%; }
    .col2 { width: 33%; }
    .col3 { width: 34%; }
  </style>
</head><body>
  <form>
    <ul class="myform">
      <li class="col1"><span><label for="a">Label</label>              <input id="a" name="a"></span></li>
      <li class="col2"><span><label for="b">Label</label>              <input id="b" name="c"></span></li>
      <li class="col3"><span><label for="c">Label a bit longer</label> <input id="c" name="c"></span></li>
    </ul>
  </form>
</body></html>

マークアップのレイアウト専用に導入された要素が 1 つだけあります。これ<span>は、table-cell 内でテーブルとして機能するために必要です。

ラベル セルのwidth: 1%;は実際の寸法ではなく、できるだけ狭くするためのものです (パーセンテージではなく絶対値では同じ効果が得られません)。これwhite-space: nowrap;により、ラベルが巻きつくのを防ぎます。

.col1などは、列の幅を指定するためのものです。

于 2012-11-06T19:19:39.467 に答える
0

これにはいくつかの方法があります。個人的には、このタイプのデータには表を使用するのが好きです (ただし、表形式のデータでない場合は、DIV などの他の手段を使用することをお勧めします)。テーブルの簡単な例を示します。

テーブル：

<table width="100%" cellpadding="0" callspacing="0" border="0">
 <tr>
  <td width="200">LABEL 1</td><td>&nbsp;</td> <!-- this is the padding table cell -->
  <td width="200">LABEL 2</td><td>&nbsp;</td>
  <td width="200">LABEL 3</td><td>&nbsp;</td>
 </tr>
</table>

例のテーブル JSFiddle

Div の使用は、デフォルトでインラインであるため、少し複雑です。ラベルを別の行に取得します。「display: table-cell」などの CSS 属性を調べて、上記と同じ結果を得ることができます。それ以外の場合は、CSS を使用して絶対位置と相対位置を調べることができます。

<div width="100%">
 <div style="position:absolute; top:0px; width: 33%;">LABEL 1</div>
 <div style="position: absolute; top:0px; left: 33%; width: 33%;">LABEL 2</div>
 <div style="position: absolute; top:0px; left: 66%; width: 34%;">LABEL 3</div>
</div>

ただし、レイアウトがページ/ブラウザーの表示領域の幅の 100% であると想定しているため、これにはまだいくつかの問題があります。

于 2012-11-06T17:05:36.143 に答える
0

編集: 固定幅ラベルに対処するために更新されました。(任意に100pxに設定)

http://jsfiddle.net/SebastianPataneMasuelli/XHrSr/

HTML:

<div>
 <div>
     <div class="label">LABEL</div>
     <div>filler</div>
 </div>
  <div>
     <div class="label">LABEL</div>
     <div>filler</div>
 </div>
  <div>
     <div class="label">LABEL</div>
     <div>filler</div>
 </div>
</div>

CSS:

div { width: 100%; } 
div div { 
    width: 33%; 
    background-color: salmon; 
    float: left; 
    position: relative
}
div div div { 
    background-color: pink; 
    position: relative; 
    z-index: 2
}
div div div:last-child { 
    background-color: red;  
    position: absolute; 
    width: 100%; 
    z-index: 1 
}
.label { width: 100px }

</p>

</p>

于 2012-11-06T19:39:51.617 に答える