12

<UL>私の Web アプリ フレームワークは、無効なフィールドの直後の順序付けられていないリスト内の各フィールドのフォーム エラーをレンダリングします。私の問題は、エラーがフォームフィールドと同じ行にリストされるようにスタイルを設定できなかったことです。代わりに、改行が の前にレンダリングされます<UL>。

これは、サーバーが決定した無効なフィールドを示す、スタイルを設定しようとしている html です。 

<p>  
    <label for="id_email">Email</label>  
    <input id="id_email" type="text" name="email" />  
    <span class='field_required'> *</span>  
    <ul class="errorlist"><li>This field is required.</li></ul>  
    </p>

span必須フィールドごとにアスタリスクを表示する「field_required」と、フォームが (サーバー上で) 検証されない場合にレンダリングされる「errorlist」との間の改行を防ぐにはどうすればよいですか?

現在、私はスタイリングしています： 

  span.field_required {color:red; display:inline;}  
  ul.errorlist {list-style-type: none; display:inline;}  
  ul.errorlist li {display: inline; color:red; }

更新: これまでご協力いただきありがとうございました。

私のフレームワーク（django）はデフォルトでエラーを<UL>. 素晴らしい提案に従って、リストを独自のスタイルでラップしてみまし<p>た<span>。リストを でラップすることは<span>、Firefox 3.0 では機能するようになりましたが、Safari 4.0 では機能しません。

Safari で要素を調べると、HTML ソースの外観ではない<UL>にもかかわらず、段落が の直前で閉じられているように見えます。

クロスブラウザーのバグに遭遇しましたか? (いいえ。以下を参照してください!)

最終的な解決策: ご協力いただきありがとうございます。これが私が最終的に問題を修正した方法です：

  • <p>label-field-error コンボの周りのタグを<div>スタイル付きのに置き換えましたclear:both;。W3C 仕様では a 内のブロック (私の場合はリスト) が禁止されていることを指摘してくれた jennyfofenny に感謝し<p>ます。これが、Safari がリストの前に私の段落を自動的に閉じていた理由ですが、Firefox はそれをスライドさせました。

次に、リストのスタイルを次のように設定します。

ul.errorlist {list-style-type: none; display:inline; margin-left: 0; padding-left: 0;}
ul.errorlist li {display: inline; color:red; font-size: 0.8em; margin-left: 0px; padding-left: 10px;}
4

5 に答える 5

13

p タグを display: inline に設定するのはどうですか? それはオプションですか？

p { display: inline; }

p タグの問題については... W3C 仕様では、段落タグ内で順序付けられていないリスト タグを許可しているとは思えません。http://www.w3.org/TR/html401/struct/text.html#h-9.3.1から:

P 要素は段落を表します。ブロック レベルの要素 (P 自体を含む) を含めることはできません。

于 2009-11-05T21:19:08.017 に答える
1 
ul.errorlist { display: inline; margin: 0; }
于 2009-11-05T19:15:57.203 に答える
1

最後に 1 つだけ:

ul.errorlist {
  表示: インライン;
  リスト スタイル タイプ: なし。
}
于 2009-11-05T19:16:47.403 に答える
1

段落とリストの間のスペースを削除したいだけですか?

その場合は、次を使用します。

ul.errorlist {
    margin-top:0;
}

次に、「margin-bottom:0;」を追加します。パラグラフに追加します (または単にエラーリストを p タグ内に配置します)。リストを1行に表示したい場合は、他の人が提案したようにdisplay:inlineを使用してください。

于 2009-11-05T19:42:07.057 に答える