Question

我正在使用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>

Answer 1

只需从CSS中的输入框中删除边距。

 input { margin:0px !important;  }

Answer 2

你的解决方案不太可能是一个简单的黑客攻击：

#myid2 {
    margin-bottom:0px;
}

working demo

另请注意，您的表单为float'ed ....因此您必须使用

.clr{ clear:both; }

与其他答案不同，建议不要使用input {margin:0px !important;}，因为这会影响所有input字段和表单布局...... see what i mean !!

Answer 3

您的输入有默认保证金。在css中使用此规则：

input {margin:0px !important;}

减少Foundation的行间距

3 个答案: