0

ZURB の Foundation 4 を使用してレスポンシブ Web サイトを構築しています。

ログインボタンの横にパディ​​ングを入れずに、ログインフォームを右に揃えようとしています。

入力ボックス (元は検索フォーム) が 1 つしかないドキュメントに従うと、ボタンの右側にパディングがありません。

このコードはこれを実現し、再現可能であり、基礎ドキュメントによって提供されます。

  <form>
    <div class="row collapse">
      <div class="small-8 columns">
        <input type="text">
       </div>
       <div class="small-4 columns">
         <a href="#" class="alert button">Login</a>
       </div>
     </div>
   </form>

このコードを 2 つの入力ボックスを持つように変更すると、パディングが表示されます。パディングを削除するために考えられることはすべて試しました。これがコードです

  <form>
    <div class="row collapse">
      <div class="small-4 columns">
        <input type="text">
       </div>
       <div class="small-4 columns">
         <input type="password">
       </div>
       <div class="small-4 columns">
         <a href="#" class="alert button">Login</a>
       </div>
     </div>
   </form>

問題はここで見ることができます

ログインボタンを展開するように設定することもできますが、これにより明らかにボタンが実際よりも大きくなります。

どんな助けでも大歓迎です

4

1 に答える 1

0

ありがとう@Foundation MIRCチャンネル！

答えは、列に small-5、small-5、small-2 の幅を与え、最後に拡張ボタンを配置することです。

于 2013-10-07T10:55:12.477 に答える