CSS基础清除默认保证金加入到对象中去

Question

我想把文本框和按钮连接在一起，不需要任何空格。在这两者之间 在Foundation-Zurb框架中，我已经删除了所有内容的margin。

screenshot of the described situation

<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>

Answer 1

在Foundation中，每一列的左右都有padding。所以你所看到的是列的左、右padding创造空间的结果。你将不得不覆盖列的padding。首先，在你要删除padding的那部分代码上创建一个独特的包装。这一点很重要，这样你就不会从页面上的每一列中删除列填充。然后，选择div包装器中的column类来移除该部分的列填充。

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>

CSS基础清除默认保证金加入到对象中去

问题描述投票：0回答：1

1个回答

最新问题

CSS基础清除默认保证金加入到对象中去

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1