在标签后面显示输入

我需要显示（在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

来源

2013-06-27 Hidalgo

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

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

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

来源

2013-06-27 14:19:03

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

<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-27 14:19:33 framauro13

谢谢大家的建议。通过在元素之间插入注释去除空白不起作用。将左侧位置或边距设置为左侧至数字-100像素。但我坚信，硬编码在每个浏览器上看起来都不太好。我希望我能找到一个解决方案，而不用硬编码。我会继续寻找。 – Hidalgo

祝你好运。你可以发布应用于这些元素的CSS吗？这可能有助于追踪这个问题。 – framauro13

我找到了解决方案，以便如何做到我所需要的。我使用引导类“form-horizontal”和“controls”这些类将margin-left的值设置为180px。所以我的输入总是在标签右侧180px。一旦我在我的课程中覆盖此值，输入将显示在标签的旁边。 – Hidalgo

你可以把输入介质上的负利润率，迫使它更接近标签：

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

来源

2013-06-27 14:19:34

在标签后面显示输入

回答

相关问题