li in ul이 CSS로 래핑되는 것을 방지하는 방법-CSS 튜토리얼-php.cn

li in ul이 CSS로 래핑되는 것을 방지하는 방법

WBOY

풀어 주다： 2021-11-18 11:59:47

원래의

3466명이 탐색했습니다.

ul의 li이 래핑되는 것을 방지하는 Css 방법: 1. float 속성을 사용하면 li 요소에 "{float:left;}" 스타일만 추가하면 됩니다. 2. 디스플레이 속성을 사용하면 li 요소에 "{display:inline;}" 스타일만 추가하면 됩니다.

li in ul이 CSS로 래핑되는 것을 방지하는 방법

이 튜토리얼의 운영 환경: 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>

로그인 후 복사

렌더링:

li in ul이 CSS로 래핑되는 것을 방지하는 방법

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로 래핑되는 것을 방지하는 방법