Question

我需要在（在div标签内）显示标签，并在标签旁边显示输入。我正在使用bootstrap 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才能完成此操作？ TIA

Answer 1

要仅调整输入字段的位置，您应该只能应用该元素的“position”CSS属性。将“position”属性设置为relative后，可以使用top，bottom，left和right将元素相对于其初始起始位置的位置移动。

在下面的示例中，我将输入字段移动到正常位置的左侧5个像素。

<style>
  .controls{
    position:relative;
    left:-5px;
  }
</style>

Answer 2

尝试删除元素之间的任何空格。例如：

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

然后，如果您希望它们彼此相邻放置，只需删除div或输入的边距或填充。它们之间的空白被渲染，因此您必须将其删除。我见过的另一种方法（但从未使用过）是在元素之间添加HTML注释，如下所示：

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

看看其中任何一个是否有帮助。我最近遇到了这个问题，我的标签和输入之间出现了意想不到的空白，我无法在不使用负边距的情况下将其删除，我不喜欢。我找到的解决方案是删除第一个示例中的空白。它在代码中看起来不太漂亮，但它可以工作。

祝你好运！

Answer 3

您可以在输入媒体上添加负边距以强制它更接近标签：

    div.controls {
        display:inline;
    }
    .input-medium {
        margin-left:-4px;
    }

标签后立即显示输入

3 个答案: