CSS Foundation 清除默认边距以加入对象
CSS Foundation clearing default margin to join to objects
我想将文本框和按钮连接在一起,没有任何 space IN BETWEEN
他们在 Foundation-Zurb framework.I 中删除了所有内容的保证金。
<style>
.margin-top{
margin-top: .7em;
}
.margin-top div input[type="text"] {
height:2em;
}
.button-height {
width:5em;
padding:.3em;
}
</style>
<body>
<div class="row margin-top">
<div class="small-7 columns">
<img src="http://placehold.it/220x67">
</div>
<div class="small-3 columns no-margin">
<input type="text" class="input-small no-margin">
</div>
<div class="small-2 columns no-margin">
<button class="button-height no-margin">search</button>
</div>
</div> <!-- end-of-ROW1 -->
</body>
</html>
在 foundation 中,每列的左侧和右侧都有填充。因此,您看到的是创建 space 列的左右填充的结果。您将不得不覆盖列填充。首先,围绕要从中删除填充的代码部分创建一个独特的包装器。这很重要,因此您不会从页面上的每一列中删除列填充。然后,select div 包装器内的列 class 从该部分删除列填充。
CSS:
.unique-div-name .columns {
padding-left: 0;
padding-right: 0;
}
HTML:
<div class="row margin-top unique-div-name">
<div class="small-7 columns">
<img src="http://placehold.it/220x67">
</div>
<div class="small-3 columns no-margin">
<input type="text" class="input-small no-margin">
</div>
<div class="small-2 columns no-margin">
<button class="button-height no-margin">search</button>
</div>
</div>
我想将文本框和按钮连接在一起,没有任何 space IN BETWEEN 他们在 Foundation-Zurb framework.I 中删除了所有内容的保证金。
<style>
.margin-top{
margin-top: .7em;
}
.margin-top div input[type="text"] {
height:2em;
}
.button-height {
width:5em;
padding:.3em;
}
</style>
<body>
<div class="row margin-top">
<div class="small-7 columns">
<img src="http://placehold.it/220x67">
</div>
<div class="small-3 columns no-margin">
<input type="text" class="input-small no-margin">
</div>
<div class="small-2 columns no-margin">
<button class="button-height no-margin">search</button>
</div>
</div> <!-- end-of-ROW1 -->
</body>
</html>
在 foundation 中,每列的左侧和右侧都有填充。因此,您看到的是创建 space 列的左右填充的结果。您将不得不覆盖列填充。首先,围绕要从中删除填充的代码部分创建一个独特的包装器。这很重要,因此您不会从页面上的每一列中删除列填充。然后,select div 包装器内的列 class 从该部分删除列填充。
CSS:
.unique-div-name .columns {
padding-left: 0;
padding-right: 0;
}
HTML:
<div class="row margin-top unique-div-name">
<div class="small-7 columns">
<img src="http://placehold.it/220x67">
</div>
<div class="small-3 columns no-margin">
<input type="text" class="input-small no-margin">
</div>
<div class="small-2 columns no-margin">
<button class="button-height no-margin">search</button>
</div>
</div>