줄바꿈 없이 CSS ul을 구현하는 방법

줄 바꿈 없이 CSS ul을 구현하는 방법: 1. 너비를 충분히 넓게 설정한 다음 li의 float 속성을 왼쪽으로 설정합니다. 2. "white-space:nowrap;"을 사용하여 블록 요소에서 공백과 줄 바꿈을 처리합니다. .

이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.

줄 바꿈 없이 가로로 정렬하는 방법은 무엇입니까? 옵션 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!