1

(div タグ内に) ラベルを表示し、ラベルのすぐ隣に入力を表示する必要があります。私はブートストラップ CSS を使用しており、コードは次のとおりです。

<div class="row">
    <div class="span3">
        <div class="control-group">
             <label class="control-label" for="txtInput">Enter Text:</label>
                 <div class="controls">
                       <input id="txtId" class="input-medium" name="txtInput" />
                 </div>
        </div>
     </div>
</div>

私が何をしても、ラベル（「テキストを入力してください：」）と入力の左マージンの間にスペースがあります。

これを実現するために HTML または CSS を変更するにはどうすればよいですか? ティア

4

3 に答える 3

1

要素間の空白を削除してみてください。例えば：

<label class="control-label" for="txtInput">Enter Text:</label><div class="controls"><input id="txtId" class="input-medium" name="txtInput" /></div>

次に、div または入力のマージンまたはパディングを削除するだけで、それらを隣り合わせに配置できます。それらの間の空白はレンダリングされるため、削除する必要があります。私が見たもう 1 つの方法は (ただし、使用したことはありません)、代わりに次のように要素間に HTML コメントを配置することです。

<label class="control-label" for="txtInput">Enter Text:</label><!--
--><div class="controls"><!--
       --><input id="txtId" class="input-medium" name="txtInput" />
   </div>

それらのいずれかが役立つかどうかを確認してください。最近、ラベルと入力の間に予期しない空白が発生するというこの問題に遭遇しました。負のマージンを使用しないと削除できませんでした。これは好ましくありませんでした。私が見つけた解決策は、最初の例のように空白を削除することでした。コードではあまりきれいに見えませんが、機能します。

幸運を！

于 2013-06-27T14:19:33.593 に答える
1

input-medium に負のマージンを設定して、強制的にラベルに近づけることができます。

    div.controls {
        display:inline;
    }
    .input-medium {
        margin-left:-4px;
    }
于 2013-06-27T14:19:34.230 に答える