0

レールを使用してシンプルなeコマースアプリケーションを作成しています。各製品ページにフォームがあり、ユーザーがその製品のいくつかのカラーバリアントを選択できるようにし、その後、カートに簡単に追加することができます。

問題は、コードがまったく同じであるにもかかわらず、2 つの異なるページでボタンが 2 つの異なる場所に表示されることです。

これが最初の例です。3 つのバリアントのみが表示され、これらのバリアントの下にボタンが表示されます。

ここに画像の説明を入力

これを生成する html は次のとおりです (jsfiddle コード例はこちらhttp://jsfiddle.net/zYAVW/ ) 。

<form accept-charset="UTF-8" action="http://192.168.1.113:3000/orders/populate" method="post">    
<ul> # A bunch of styled list elements # </ul>
<br><br>
<button type="submit">Add to cart</button>
</form>

しかし、約85個のリスト要素がある私の他のページでは、ボタンはスタイル付きリスト要素とインラインで表示されますが、まったく同じコードを使用します.ボタンまたはフォームのcssスタイリングはなく、とにかく作ることができません.リストの下にとどまります。

2ページ目の画像はこちら

ここに画像の説明を入力

(jsfiddle コード例はこちらhttp://jsfiddle.net/zBAMN/ )

誰か知っていますか

  1. なぜこれが起こっているのですか？
  2. それを修正する方法は？

ありがとう！

4

2 に答える 2

1

要素でoverflow:hiddenを使用しulます。

JSFiddle: http://jsfiddle.net/zBAMN/3/

于 2013-01-20T05:28:14.820 に答える
0

clear:bothあなたの最初の休憩に追加します。

<br style="clear:both;"><br><button type="submit">Add to cart</button>

http://jsfiddle.net/zBAMN/4/

これが発生している理由を理解することが重要です。リスト要素を左にフロートさせて、列に配置することを選択しました。このフロートをクリアする必要があります。そうしないと、次の要素は通常のドキュメントフローを再開しません。clear: bothstyleプロパティ を持つ要素を挿入することにより、floatを明示的にクリアできます。

http://css-tricks.com/the-how-and-why-of-clearing-floats/を参照してください

intelisが指摘したようoverflow: hiddenに、親要素に追加することもできます。これにより、親タグを閉じると自動的にクリアされます。

http://css-tricks.com/snippets/css/clear-fix/を参照してください

于 2013-01-20T05:34:06.207 に答える