Li를 CSS로 감싸지 않도록 강제하는 방법

li를 줄 바꿈하지 않도록 하는 Css 방법: 1. 표시 속성을 사용하여 li 요소를 인라인 요소 또는 인라인 블록 요소로 변환합니다. 요소 앞뒤에 줄 바꿈이 없으면 이를 수행할 수 없습니다. 포장하다. 2. float 속성을 사용하여 li 요소에 "float:left;" 스타일을 추가하여 li 요소를 부동화하고 나란히 표시합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

li는 기본적으로 블록 요소이며 항상 새 줄에서 시작하고 전체 줄을 차지합니다.

<ul>
	<li>
		<a href="http://www.php.cn/">首页</a>
	</li>
	<li>
		<a href="http://www.php.cn/">关于我们</a>
	</li>
	<li>
		<a href="http://www.php.cn/">联系我们</a>
	</li>
</ul>

Rendering:

리를 포장하지 않도록 강제하는 방법은 무엇인가요? 아래에 자세히 소개된 표시 또는 부동 속성을 사용할 수 있습니다.

방법 1: 표시 속성

을 사용하여 "display:inline;" 또는 "display:inline-block;" 스타일을 li 태그에 설정하고 li 태그를 인라인 요소 또는 인라인 블록으로 표시합니다. li 태그를 만드는 요소 레이블은 래핑되지 않습니다.

li {
	display: inline;
	/*display: inline-block;*/
	margin-right: 10px;
	list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}

렌더링:

설명:

인라인 요소의 특성:

• 너비 및 높이 설정이 잘못되었습니다.

• 여백 설정만 왼쪽 및 오른쪽 방향으로 유효하며 위아래로는 유효하지 않습니다. ; 패딩 설정은 위, 아래, 왼쪽 및 오른쪽 모두 유효합니다. 즉, 공간을 확장합니다.

• 자동 줄 바꿈 없음

인라인 블록 요소의 특징:

• 자동 줄 바꿈 없음

• 너비와 높이를 식별하는 기능

• 기본 배열은 왼쪽에서 오른쪽입니다

(동영상 공유 학습: css 동영상 튜토리얼)

방법 2: float 속성 사용

li 요소를 플로팅하고 나란히 표시하는 float 속성입니다. 플로팅은 문서 흐름에서 요소를 가져와서 왼쪽이나 오른쪽으로 이동하고 그 주위의 요소를 재배열하는 방법입니다.

li {
	float: left;
	margin-right: 10px;
	list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}

Rendering:

설명:

Floating은 페이지에서 개체의 앞뒤 흐름 순서를 변경할 수 있는 매우 유용한 레이아웃 방법입니다. 콘텐츠의 레이아웃을 단순하게 만들고 확장성이 좋다는 장점이 있습니다.

플로팅은 CSS 레이아웃의 매우 강력한 레이아웃 기능이며 CSS 레이아웃을 이해하는 데 중요한 문제이기도 합니다. CSS에서는 div를 포함한 모든 요소가 플로팅 방식으로 표시될 수 있습니다.

Floating을 사용하면 부동 속성으로 설정된 요소가 표준 일반 흐름의 제어에서 벗어나 상위 요소의 지정된 위치로 이동할 수 있습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 Li를 CSS로 감싸지 않도록 강제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!