1

フィドル

入力要素をラベル（約3ピクセルのみ）に対して下に移動したいと思います。私が抱えている主な問題は、入力を行うとdisplay: block;レイアウト全体が壊れるということです。現在のように、コードテキストをラベルのすぐ下に表示し、関連付けられている入力を入力する必要があります。

HTML：

<label for="inputSize"><p>Size</p><input id="inputSize" class="char2" type="text"><br><code>font-size: 17px;</code></label>
<label for="inputWeight"><p>Weight</p><input id="inputWeight" class="char3" type="text"><br><code>font-weight: 400;</code></label>
<label for="inputSpacing"><p>Letter-spacing</p><input id="inputSpacing" class="char2" type="text"><br><code>letter-spacing: 0;</code></label>
<label for="inputWSpacing"><p>Word-spacing</p><input id="inputWSpacing" class="char2" type="text"><br><code>word-spacing: 0;</code></label>

CSS：

label {
    white-space: nowrap;
    display: inline-block;
}
label p {
    background: aqua;
    display: inline-block;
    color: @gray1;
    padding: 1px 10px;
    font-size: 16px;
    line-height: 24px;
}
input {
    font-family: monospace;
    height: 14px;
    box-shadow: 0px 0px 7px 0px #b8b8b8;
    border: 0;
}

ありがとう！！

4

1 に答える 1

6

を使用position: relativeすると、本来あるべき場所を基準にして要素を移動できます（この場合はtop: 3px。

http://jsfiddle.net/ExplosionPIlls/3YUTM/1/

于 2013-02-19T21:09:40.347 に答える