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 중국어 웹사이트의 기타 관련 기사를 참조하세요!