幅制御の問題について助けてください_html/css_WEB-ITnose

HTML ページのデザイン Web ページのレイアウト

タグの使用

これは私の Web ページ プレゼンテーション レイヤーのコードの一部です:
aaa2799f09dd193b5b91ffa5bf46afe5
私のアイデアは、これら 3 つのリスト項目を同じ行に配置することですが、3 つのリスト項目同じ行の水平行上にありません。 ghi を含む

タグは、自動的に新しい行の左側に移動されます。

その後、すべての要素のボーダー、パディング、マージンをなしまたは 0 に設定しましたが、結果は依然として同じように表示され始めました。
3 つの

タグを合計するとちょうど 100% の幅になります。

の幅を超えるのはなぜですか。最後の
• タグの幅を 19% に変更してみたところ、3 つの
• が並んで表示されました。 (注:
• の float を left に設定しました)。
  誰か私にアドバイスをいただけますか？ ありがとう！
  

  ディスカッションへの返信（解決策）

  liはブロックレベルの要素であり、後ろに直接接続されるpやimgのような行レベルの要素とは異なり、自動的に下に配置されます。 ; をスタイルに追加すると、フローティング要素になります。最後に
• / を追加します。 li> 後続のレイアウトに影響を与えないようにフロートをクリアします

  li はブロックレベルの要素であり、後ろに直接接続される p や img のような行レベルの要素とは異なり、自動的に下に配置されます。 left in style; この属性は十分です。フローティング要素になります。最後に、

  div> 後のレイアウトに影響を与えないようにフローティングを解除します
  申し訳ありませんが、最後にフローティングになっていることに気づきませんでした。 問題があると推定されます。マージンやパディングの問題です。チェックしていない可能性があります。スタイルを使用してみてください。中に「*{margin:0;padding:0}」という文を追加します
  実際に表示されるときのulの幅は789pxであると仮定して、この場合、3 つの li タグの幅はそれぞれ 315.6px、315.6px、157.8px になります。これが問題となるはずです。

  一部の古いバージョンのブラウザでは、float 型の幅が認識されず、エラーが発生します。通常、コードを記述するときは、padding と magin のデフォルトのプロパティを考慮する必要があります。