在標籤後面顯示輸入

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

在標籤後面顯示輸入

回答

相關問題