2014-01-09 75 views
0

我使用的是Found 4.04。我在表單中有一個文本框,我正試圖在文本框的正下方放置一些文本。然而,有一點比我想要的更多的空間,我想把它裁掉。我嘗試使用Firebug調整邊距,填充等,沒有任何工作。減少基金會的行間距

有沒有辦法減少文本框和它們相應的位置文本之間的垂直空間?即「小文本在這裏」將向上靠近文本框。

這裏是的jsfiddle鏈接(你將不得不收縮代碼面板,以便您可以一邊看盒子並排):http://jsfiddle.net/R95JL/

<html> 
<head><meta charset="utf-8"> 
<meta content="width=device-width" name="viewport"> 
<link href="http://cdn.jsdelivr.net/foundation/4.0.4/css/foundation.min.css" rel="stylesheet"> 
</head> 

<body> 
<h4> Test form </h4> 
<br> <br> 
<div class="container"> 
    <div class="row"> 
     <form enctype="application/x-www-form-urlencoded" action="" method="post"> 
      <div class="large-3 columns"> Text </div> 
      <div class="large-2 columns"><input type="number" value="" required="" name="f2" id="myid1"></div> 
      <div class="large-2 large-offset-1 columns end"><input type="number" value="" required="" name="f3" id="myid2"></div> 
     </form> 
    </div> 

    <div class="row"> 
     <div class="large-offset-3 large-2 columns"><small> Small text goes here </small> </div> 
     <div class="large-2 large-offset-1 columns end"><small> Small text goes here </small> </div> 
    </div> 
</div> 
</body> 
</html> 

回答

2

您的解決方案是不可能的一個簡單的黑客:

#myid2 { 
    margin-bottom:0px; 
} 

working demo

另外請注意,您的形式是float「版....所以你必須使用

.clr{ clear:both; }

和其他答案不同,不推薦使用input {margin:0px !important;},因爲這會影響所有input字段和表單佈局... see what i mean !!

+0

謝謝。我絕對不希望覆蓋整個網站的輸入元素,因此您的解決方案在這方面效果更好。我想將兩個文本都移動,所以我爲這兩個ID應用了相同的樣式。 – Ecognium

+0

@Ecognium:welcome :) – NoobEditor

3

只需刪除從輸入框的利潤率在你的CSS。

input { margin:0px !important; } 
+0

+1思考:) – NoobEditor

1

您的輸入具有默認邊距。在CSS中使用這樣的規則:

input {margin:0px !important;}