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

ページ レイアウト中にこのような状況に遭遇したことがありますか? ul を水平に配置すると、新しい行に折り返されますが、これは私たちが望んでいる現象ではありません。この状況に対処する方法を知っていますか?この記事では、ulを折り返さずに横に配置する方法について説明します。興味がある場合は、コメントを読んでください。

フロントエンドを学び、さまざまなレイアウトを書いてみました。今日は横に並べられた写真リストを実装したいので、最初に思いつくのは、ul を使用して list-style を none に設定することです。ただし、これは ul をデフォルトで水平配置にするだけであり、ul の折り返しを制限するものではありません。 ul で設定された幅が画像を収容するのに十分でない場合、画像は自動的に折り返されます。

したがって、情報と関連するレイアウト プロパティを確認してください。最終的に 2 つの解決策が見つかりました。

オプション 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 が選択されている場合、テキストは折り返されず、5347c3d061f1b90e45639e8ac6d3777b タグが見つかるまで同じ行に続きます。ただし、テキスト以外の要素にも使用できます。

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

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

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

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

以上が行の折り返しを行わずに水平配置の効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。