1

以下のコード サンプルは、'float: left' 行を含めても削除しても、ほぼ同じように機能します。唯一の違いは、float left バージョンがその下のブロックをもう少し上に移動することですが、改行以上にはなりません。100% 幅に設定された要素にフローティングを追加する理由がわかりません。私の理解では、これにより、その下のすべてがその周りを流れるのを防ぎます。それが浮遊の目的ではないでしょうか。

ul
{
    list-style-type: none;
    float: left;
    width:100%;
    padding:0;
    margin:0;
}

li
{
    display: inline;    
}
4

4 に答える 4

1

float プロパティは、オブジェクトをインラインで表示し、テキストを片側に向けて表示できるようにするためのものです。したがって、フロート左はインラインによく似ていますが、フロートされる要素が左または右に向かって配置されることを除いて. float:left; を使用する必要はありません。あなたがやろうとしていることのフラグです。多くの場合、代わりに position、margin、padding、left 、top 、right 、bottom を使用して、必要な場所に ul を配置する方が良い場合があります。これにより、通常、より制御可能な結果が得られます。

これは、フロートなしとフロート左を切り替えるときに何が起こるかの例です。 http://jsfiddle.net/um9LV/

于 2012-08-17T04:32:09.937 に答える
1

これが機能する理由は、<li>ディスプレイが に設定されているためinlineです。これは、この HTML タグを持つすべての要素が、他のすべての要素と同じ行に表示されることを意味します。つまり、改行はありません。代わりに次のことをお勧めします。

ul {
    list-style-type: none;
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden; /* This will ensure there's a line break after using float for the list items */
}

li {
    float: left;
}

marginこのようにして、通常はテキスト文字列内の文字として機能するインライン要素とは対照的に、各リスト項目がand をpadding適切に使用できるようにすることができます。

于 2012-08-17T04:23:37.240 に答える
0

CSSのfloatプロパティは、通常のフローから要素を取得し、そのコンテナの左側または右側に沿って配置する必要があることを指定します。このコンテナでは、テキストとインライン要素が周囲を囲みます。

要素がフローティングされると、ドキュメントの通常のフローから取り出されます。含まれているボックスまたは別の浮動要素の端に触れるまで、左または右にシフトされます。

于 2012-08-17T04:33:23.567 に答える
0

float:left- float を使用して、ブロック要素を隣り合わせにスライドさせます

display:block- リンクをブロック要素として表示すると、リンク領域全体 (テキストだけでなく) をクリック可能になり、幅を指定できるようになります

于 2012-08-17T05:09:00.430 に答える