줄 바꿈 없이 가로 배열 효과를 얻는 방법

페이지 레이아웃 중에 이런 상황을 겪은 적이 있나요? ul을 가로로 정렬하면 새 줄로 넘어가는데, 이는 우리가 원하는 효과가 아닙니다. 이 상황을 처리하는 방법을 알고 계시나요? 이 글에서는 줄 바꿈 없이 가로로 정렬하는 방법에 대해 설명합니다. 관심이 있으시면 댓글을 읽어보세요.

방금 프론트엔드도 배우고 다양한 레이아웃을 작성해보았습니다. 오늘은 가로로 정렬된 사진 목록을 구현하고 싶기 때문에 가장 먼저 떠오르는 것은 ul을 사용하여 목록 스타일을 없음으로 설정하는 것입니다. 그러나 이는 ul의 기본 설정을 수평 배열일 뿐이며 ul의 줄 바꿈을 제한하지는 않습니다. 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을 선택하면 텍스트가 줄 바꿈되지 않고 5347c3d061f1b90e45639e8ac6d3777b 태그가 나타날 때까지 텍스트가 같은 줄에 계속 표시됩니다. 그러나 텍스트가 아닌 요소에도 사용할 수 있습니다.

display 속성도 있습니다. 옵션 2에서 inline-block으로 설정하지 않으면 줄 바꿈이 없는 효과를 얻을 수 없습니다.

inline-block: 객체를 인라인 객체로 렌더링하지만 객체의 내용은 블록 객체로 렌더링됩니다. 인접한 인라인 개체는 공백을 허용하여 같은 줄에 렌더링됩니다.

인라인 블록의 특징: 객체는 인라인 객체로 표시되지만 객체의 내용은 블록 객체로 표시됩니다. 인접한 인라인 개체는 공백을 허용하여 같은 줄에 렌더링됩니다. (정확히 말하면 이 속성이 적용된 요소는 인라인 객체로 렌더링되고, 주변 요소는 같은 선상에 남지만, 플롯 요소의 너비와 높이 속성을 설정할 수 있습니다.)

이것은 줄바꿈 없이 가로로 배열되는 문제를 해결합니다. 다양한 속성의 특성을 숙지하는 것이 필요한 것 같습니다.

위 내용은 줄 바꿈 없이 가로 배열 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!