改行なしでCSS ULを実装する方法

行の折り返しを行わずに CSS UL を実装する方法: 1. 十分な幅を設定し、li の float 属性を left に設定します。2. "white-space:nowrap;" を使用して空白文字を処理します。ブロック要素と改行文字。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

行の折り返しを行わずに ul で水平配置の効果を実現する方法

オプション 1:

幅を十分に広く設定し、li の float 属性を左に設定します。 。これは、li 要素が左にフローティングされることを意味します。コードは次のとおりです:

    ul{
    width:2000px;//设置足够的宽度
    overflow:hidden;
    white-space:nowrap;//处理块元素中的空白符和换行符的，这个属性保证图片不换行
    }
    li{
    list-style:none;
    float:left;//向左排列
    margin-left:15px;
    width:130px;
    }

オプション 2:

  ul{
    display:block;
    overflow:hidden;
    white-space:nowrap;//处理块元素中的空白符和换行符的，这个属性保证图片不换行
    }
    li{
    list-style:none;
    display:inline-block;//使li对象显示为一行
    margin-left:15px;
    width:130px;
    }

上記では、両方のソリューションで空白属性が使用されていることがわかります。この属性がないと、改行なしの効果は実現できません。 。 CSS マニュアルを見ると、この属性は要素内の空白を処理する方法であることがわかります。 nowrap が選択されている場合、テキストは折り返されず、
タグが見つかるまで同じ行にテキストが続きます。ただし、テキスト以外の要素にも使用できます。

表示属性もあります。オプション 2 では、inline-block に設定されていない場合、改行なしの効果は得られません。

inline-block: オブジェクトをインライン オブジェクトとしてレンダリングしますが、オブジェクトのコンテンツはブロック オブジェクトとしてレンダリングされます。隣接するインライン オブジェクトは同じ行にレンダリングされ、スペースを入れることができます。

inline-block の特徴: オブジェクトはインライン オブジェクトとして表示されますが、オブジェクトのコンテンツはブロック オブジェクトとして表示されます。隣接するインライン オブジェクトは同じ行にレンダリングされ、スペースを入れることができます。 (正確には、この属性が適用される要素はインライン オブジェクトとしてレンダリングされ、周囲の要素は同じ行上に残りますが、プロット要素の幅と高さのプロパティは設定できます)。

これにより、ul が折り返されずに水平に配置される問題が解決されます。さまざまな属性の特性を熟知する必要がありそうだ。

【推奨学習: css ビデオ チュートリアル 】

以上が改行なしでCSS ULを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。