html - 如何使文本框靠近文本标签

Question

我正在使用主题 Pixeladmin ( http://wrapbootstrap.com/preview/WB07403R9 )

您可能会在这张图片中看到:

我的文本框离我的标签很远，我想让它离我的标签近一点，所以我想知道我该怎么做？

这是我的盒子代码:

<div class="row form-group">
                        <label class="col-sm-2 control-label">Author:</label>
                        <div class="col-sm-10">
                            <input type="text" name="author" id="author" placeholder="Author Name" class="form-control">
                        </div>
                    </div>

请注意，您可以在预览站点上查看 css 源代码， 感谢所有帮助。

Answer 1

这是一个带有新 css3 功能的示例:calc 方法。

优点是标签的绝对宽度。输入将占用给定空间的其余部分。 HTML:

<div class="form-group">
    <label class="control-label pull-left">Author:</label>
    <input type="text" name="author" id="author" placeholder="Author Name" class="form-control pull-left">
</div>

CSS:

label {
    width: 100px;
    padding: 7px;
}

#author {
    width: calc(100% - 100px);
    min-width: 200px;
}

http://jsfiddle.net/qakxpe35/