li in ul이 CSS로 래핑되는 것을 방지하는 방법
- WBOY원래의
- 2021-11-18 11:59:473374검색
ul의 li이 래핑되는 것을 방지하는 Css 방법: 1. float 속성을 사용하면 li 요소에 "{float:left;}" 스타일만 추가하면 됩니다. 2. 디스플레이 속성을 사용하면 li 요소에 "{display:inline;}" 스타일만 추가하면 됩니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
ul li가 CSS로 감싸지 않도록 강제하는 방법
ul li가 CSS로 감싸지 않도록 강제하는 방법 이 글에서는 CSS를 사용하여 ul li가 감싸지 않도록 강제하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
1. li 요소를 줄바꿈 없이 나란히 표시하려면 float 스타일을 사용하세요.
CSS에서는 float 속성을 사용하여 li 요소를 float하고 나란히 표시할 수 있습니다. 플로팅은 문서의 흐름에서 요소를 가져와서 왼쪽이나 오른쪽으로 이동하고 그 주위의 요소를 재배열하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
float: left;
margin-right: 10px;
list-style: none;/* CSS注释：加list-style:none去掉li默认产生”点“ */
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">123</a>
</li>
<li>
<a href="#">456</a>
</li>
<li>
<a href="#">789</a>
</li>
</ul>
</body>
</html>렌더링:
2. 줄바꿈 없이 li을 나란히 표시하려면 디스플레이를 사용하세요.
디스플레이 속성은 요소가 생성해야 하는 상자 유형을 지정합니다.
display 속성은 레이아웃을 설정할 때 요소가 생성하는 표시 상자 유형을 정의하는 데 사용됩니다. HTML과 같은 문서 유형의 경우 부주의하게 표시를 사용하면 HTML에 이미 정의된 표시 계층 구조를 위반할 수 있으므로 위험할 수 있습니다. XML의 경우 XML에는 이러한 종류의 계층 구조가 내장되어 있지 않으므로 모든 표시가 절대적으로 필요합니다.
인라인: 기본값. 이 요소는 요소 앞이나 뒤에 줄 바꿈이 없는 인라인 요소로 표시됩니다.
li 요소를 요소 앞뒤에 줄 바꿈 없이 인라인 요소로 표시하려면 display:inline을 사용하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li {
display:inline
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">123</a>
</li>
<li>
<a href="#">456</a>
</li>
<li>
<a href="#">789</a>
</li>
</ul>
</body>
</html>렌더링:
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
위 내용은 li in ul이 CSS로 래핑되는 것을 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!