콘텐츠
웹 페이지를 만들 때 CSS를 사용하여 클릭 가능한 메뉴와 같은 가로 목록을 가운데에 배치하는 것이 유용 할 수 있습니다. 스타일 시트 언어 인 CSS를 HTML 옆에 사용하여 페이지의 모양을 제어 할 수 있습니다. CSS 스타일은 종종 다른 웹 브라우저에서 예기치 않게 표시되므로 게시하기 전에 페이지를 철저히 테스트하는 것이 중요합니다. 정렬되지 않은 목록 (ul)은 블록 수준 요소이므로 width 속성을 사용하여 중앙 집중식 효과를 만들 수 있습니다.
지침
-
Windows 메모장과 같은 텍스트 편집기에서 HTML 파일을 엽니 다.
-
다음 코드를 추가하여 HTML 파일의 ""섹션에 필요한 CSS 스타일을 가로 목록에 추가하십시오.
type = "text / css"> .myclass {text-align : center; } .myclass ul {width : 275px; margin : 0px auto} .myclass li {display : block; float : 왼쪽; 높이 : 50px; 선 높이 : 50px; 여백 : 5px; 너비 : 125px; 테두리 : 단색 1px 검정색; }목록의 너비 (ul)는 가로 항목의 여백과 여백의 합을 나타냅니다 (li).
-
다음 코드를 추가하여 HTML 파일의 ">"섹션에 가로 목록을 만듭니다.
- 첫 번째 항목
- div의 두 번째 항목
"ul"태그는 정렬되지 않은 목록을 지정합니다. "li"태그는 목록의 항목에 해당합니다. 목록 항목은 위에 정의 된 CSS 스타일과 일치하는 CSS 스타일을 사용합니다.
-
HTML 파일을 저장하고 웹 서버에로드하여 수평 중심의 목록을 봅니다.