li을 사용하여 가로로 정렬하는 방법

php中世界最好的语言
풀어 주다: 2018-06-04 11:38:40
원래의
10596명이 탐색했습니다.

이번에는 li를 사용하여 수평으로 정렬하는 방법과 li을 사용하여 수평으로 정렬할 때 어떤 주의사항이 있는지 보여드리겠습니다. 다음은 실제 사례입니다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<title>li水平排列</title>
	<style>
	html{
		font-size: 20px;
	}
	@media only screen and (min-width: 320px){
    html{font-size: 20px !important;}
	}
	@media only screen and (min-width: 350px){
	    html{font-size: 22.5px !important;}
	}
	@media only screen and (min-width: 365px){
	    html{font-size: 23px !important;}
	}
	@media only screen and (min-width: 375px){
	    html{font-size: 23.5px !important;}
	}
	@media only screen and (min-width: 390px){
	    html{font-size: 24.5px !important;}
	}
	@media only screen and (min-width: 400px){
	    html{font-size: 25px !important;}
	}
	@media only screen and (min-width: 428px){
	    html{font-size: 26.8px !important;}
	}
	@media only screen and (min-width: 432px){
	    html{font-size: 27.4px !important;}
	}
	@media only screen and (min-width: 481px){
	    html{font-size: 30px !important;}
	}
	@media only screen and (min-width: 569px){
	    html{font-size: 35px !important;}
	}
	@media only screen and (min-width: 569px){
	    html{font-size: 40px !important;}
	}
	body{
		margin: 0;
		padding: 0;
	}
	ul{
		width: 100%;
		margin: 0.3rem 0;
		padding:0.3rem 0;
		border-top:0.05rem solid #ccc;
		border-bottom: 0.05rem solid #ccc;
	}
	li{
		width: 33%;
		list-style-type: none;
		display:inline-block;
		font-size: 0.8rem;
		border-left: 0.05rem solid #ccc;
		text-align: center;
	}
	</style>
</head>
<body>
	<ul>
		<li>我是第一个li</li>
		<li>我是第二个li</li>
		<li>我是第三个li</li>
	</ul>	
</body>
</html>
로그인 후 복사

li의 너비를 33%로 설정하는 데 문제가 있습니다. 세 개의 li 태그의 너비는 실제로 한 줄 이상입니다. 한 가지 분명한 것은 li 태그에 공백이 조금 더 있다는 것입니다. 공간.

1. 부동

가장 먼저 떠오르는 것은 부동입니다. li에 float:left 스타일을 추가합니다.


이러한 효과는 위와 같습니다. 즉, li의 부동으로 인해 ul의 높이가 0이 됩니다. 이 문제를 해결하려면 다음 세 가지 방법이 있습니다.

1. ul의 높이를 높이지만 적응할 수는 없습니다.

2. 플로팅의 영향을 이해하려면 마지막 li 태그 뒤에 빈 p를 추가하세요.

(개인적으로 권장하지만 코드 유지 관리가 별로 좋지 않다고 생각합니다.)

3. UL에 Zoom 속성을 추가했는데, 이는 IE에만 ​​적합한 것 같습니다(조사해 본 적이 없습니다).

2. li 태그를 한 줄로 작성합니다


  • I am the first li
  • I am the second li< ;/li>
  • 제가 세 번째 오넬입니다

이게 왜 정상인지 이상하고, 당분간은 이해하기 어렵습니다.

3. ul에 스타일을 추가하여 li 태그 사이의 공백을 제거합니다.

ul에 글꼴 크기:0 스타일을 추가하여 li 태그 사이의 공백을 제거합니다. 주의할 점은 li 태그의 글꼴 크기를 재설정해야 한다는 것입니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

자바스크립트 날짜 형식 방식 사용 방법

Zepto 탭 이벤트 침투 및 포인트 침투 사용 방법(코드 포함)

위 내용은 li을 사용하여 가로로 정렬하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿