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 来完成此操作？TIA

4

3 回答 3

1

要仅调整输入字段的位置，您应该能够应用该元素的“位置”CSS 属性。将“位置”属性设置为相对后，您可以使用顶部、底部、左侧和右侧移动元素相对于其初始起始位置的位置。

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

<style>
  .controls{
    position:relative;
    left:-5px;
  }
</style>
于 2013-06-27T14:19:03.590 回答
1

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

<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>

看看这些是否有帮助。我最近遇到了这个问题，我的标签和输入之间出现了意外的空白，如果不使用我不喜欢的负边距，我就无法删除它。我找到的解决方案是删除第一个示例中的空格。它在代码中看起来不太漂亮，但它确实有效。

祝你好运！

于 2013-06-27T14:19:33.593 回答
1

您可以在 input-medium 上设置负边距以强制它更接近标签：

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