0

Foundation- Zurbフレームワークで、テキストボックスとボタンの間にスペースを入れずに結合したい .すべてからマージンを削除した.

説明された状況のスクリーンショット

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

1 に答える 1

1

Foundation では、すべての列の左右にパディングがあります。あなたが見ているのは、そのスペースを作成する列の左右のパディングの結果です。列のパディングをオーバーライドする必要があります。まず、パディングを削除したいコードの部分に固有のラッパーを作成します。ページのすべての列から列パディングを削除しないようにするため、これは重要です。次に、その div ラッパー内の列クラスを選択して、そのセクションから列パディングを削除します。

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>
于 2015-03-30T15:45:58.910 に答える