0

w3schoolsから取得(リンクにアクセスして、どのように見えるかを確認してください):

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul
      {
        float:left;
        width:100%;
        padding:0;
        margin:0;
        list-style-type:none;
      }
      a
      {
        float:left;
        width:6em;
        text-decoration:none;
        color:white;
        background-color:purple;
        padding:0.2em 0.6em;
        border-right:1px solid white;
      }
      a:hover {background-color:#ff3300;}
      li {display:inline;}
    </style>
  </head>

  <body>
    <ul>
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
    </ul>

    <p>
    In the example above, we let the ul element and the a element float to the left.
    The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
    The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
    We add some colors and borders to make it more fancy.
    </p>

  </body>
</html>

でul、aですfloat:left;。ここで、float は、次の要素がその周りを浮動する必要があることを示していますが、テキストはそうではありません。私は何が欠けていますか？

float2 番目:から を削除ul すると、テキストが周りに流れます。なんて深刻な一体？

inline3 番目: from を削除しても何も起こりli ません。それでも、floatfromを削除するa と、要素の間に空白が置かれます。

なぜこれらのことが起こって、すべきことをしないのかを説明できる人はいますか?

(最新のクロム)

4

2 に答える 2

4

の幅は<ul>です100%。テキストはどこにも行くことができませんが、その下にあります。

float:leftから削除<ul>するとテキストが右側に表示される理由<ul>は、コンテンツがすべて非フローティングコンテナ内にフロートされているため、が視覚的なスペースを占有しなくなるためです。高さは0pxになり、<p>幅が100％であるため、その下にドロップダウンしますが、視覚的には気付かないでしょう。<ul>境界線を付けることでこれをテストし、何が起こるかを確認できます。<p>最後にフロートしたものの隣にフロートします<li>。

<li>はインラインアイテムではありません。display:inline;とdisplay:block両方が正しくありません。彼らですdisplay:list-item;

于 2013-02-04T16:47:36.143 に答える
1

これは、<ul>幅を100％に設定すると、が全幅を占め、<ul>コンテンツをその下にプッシュするためです。<ul>幅をに変更するautoと、必要な効果が得られます。

  ul
  {
    float:left;
    width:auto;
    padding:0;
    margin:0;
    list-style-type:none;
  }
于 2013-02-04T16:49:07.783 に答える