css - 如何将这些输入元素相对于它们的标签向下移动？

Question

小提琴

我想将输入元素相对于它们的标签向下移动（只有大约 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;
}

谢谢！！

Answer 1

您可以相对于position: relative它应该在的位置移动一个元素（在您的情况下使用top: 3px.

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