ul의 li 요소를 수평으로 정렬하는 방법에 대한 자세한 그래픽 설명(코드 포함)

페이지 레이아웃에서는 li 태그를 자주 사용합니다. 왜냐하면 li 태그는 목록, 탭, 탐색 등을 만드는 데 사용할 수 있기 때문입니다. 그런데

태그의 li는 기본적으로 세로로 정렬되어 있으므로 li를 가로로 정렬할 수 있나요? 이 문서에서는 HTML에서 UL 목록을 수평으로 정렬하는 두 가지 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있으니 도움이 되길 바랍니다.

ul 목록의 가로 배열은 탐색에서 자주 사용됩니다. 다음으로 가로 탐색 예제를 사용하여 CSS를 사용하여 ul을 가로로 배열하는 방법에 대해 설명하겠습니다.

참고:

1. 기본적으로 li 목록 앞에는 작은 점이 있습니다. 때로는 아름다움을 위해 여분의 작은 점을 제거해야 할 수도 있습니다. CSS에서 list-style:none 속성을 사용할 수 있습니다. . 물론 목록 앞에 넣을 수도 있습니다.

2. 페이지를 더욱 매력적으로 만들기 위해 탐색에서는 일반적으로 의사 클래스 요소를 사용합니다. 가장 일반적인 요소는 마우스를 지나갈 때 탐색의 배경색, 글꼴 크기, 그림 등을 변경할 수 있는 것입니다. 네비게이션.

3. CSS의 표시 속성을 능숙하게 사용하세요. li에 높이와 너비를 지정하고 메뉴 내용의 위치를 ​​조정해야 하는 경우 표시 속성 값을 블록 수준 요소로 변환한 후 padding 및 text-align과 같은 속성을 가져옵니다. 효과.​

1. display:inline은 ul의 가로 배열을 구현합니다.

ul li를 사용하여 가로 탐색을 만들어 마우스가 지나갈 때 배경색이 변경되도록 합니다. 코드는 다음과 같습니다.

HTML 부분:

<ul id="nav">
		<li><a href="#">首页</a></li>
		<li><a href="#">课程介绍</a></li>
		<li><a href="#">师资力量</a></li>
		<li><a href="#">新闻动态</a></li>
		<li><a href="#">联系我们</a></li>	
	</ul>

CSS 부분:

<style type="text/css">			
	#nav {
	        margin: 50px auto;
	        height: 40px;
	         background-color: #690;
	      }			
	#nav ul {
		list-style: none;
		margin-left: 50px;
		}			
	#nav li {
		display: inline;			    
		}			
	#nav a {
		line-height: 40px;
		color: #fff;
		text-decoration: none;
		padding: 20px 20px;
		}			
	#nav a:hover {
		background-color: #060;
		}
</style>

Rendering:




마우스 통과 효과:



2. float: 왼쪽으로 수평 배열을 달성합니다. ul

부동 소수점 사용: left는 ul의 수평 배열을 구현합니다. li 부동 소수점 이후에는 표준 흐름에서 벗어나 상위 요소가 특정 스타일을 갖고 고정된 너비를 갖지 않는 경우 위치를 차지하지 않습니다. 높이를 설정하려면 상위 요소의 부동소수점을 지우거나 고정된 너비와 높이를 설정해야 합니다. HTML부분은 위와 동일하고, CSS부분은 다음과 같습니다.

<style type="text/css">
	#nav {
		height: 40px;
		margin-top: 50px;
		background-color: #690;
		}			
	#nav ul {
		list-style: none;			    
		margin-left: 50px;
		}			
	#nav li {
		display: block;
		float: left;
		}			
	#nav a {
		line-height: 40px;
		display: block;
		color: #fff;
		text-decoration: none;
		padding: 0 20px;
		}			
	#nav a:hover {
		background-color: #060;
		}
</style>

효과는 위와 동일하지만 방법이 다릅니다.

요약: float:left와 display:inline 모두 ul li의 수평 배열을 실현할 수 있습니다. 구체적인 선택 방법은 초보자가 직접 시도해 볼 수 있습니다.

위 내용은 ul의 li 요소를 수평으로 정렬하는 방법에 대한 자세한 그래픽 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!