1. 개요
ul > li 목록형 구조 작성 과정에서 세로 정렬이 되지 않아, 여러 방법을 찾아 보던 중 가장 HTML가 친숙하고
쉬운 방법으로 세로 정렬 구성을 할 수 있는 방법을 찾아 기록한다.
2. 작성 방법
1) CSS 구성
"li:before" 구성을 하게되면 "display: inline-block"을 통해 최초 초기 설정을 해준다.
content "싱글쿼터"를 넣게되면 기본 사이즈가 지정된다.
ul li:before {
display: inline-block;
vertical-align: middle;
content: '';
height: 100%;
}
ul li {
width: 100%;
height: 38px;
border-bottom: 1px solid blue;
}2) HTML 태그는 특이사항 없이 div > ul >li 구조도이다.
- 1
- 2
- 3
- 4
- 5
<!DOCTYPE>
<html>
<head>
<title>테스트 데이터 입니다.</title>
<style>
div.box {
width:50%;
height:50%;
}
ul.boxList {
width:100%;
height:100%;
}
ul.boxList li:before {
display: inline-block;
vertical-align: middle;
content: '';
height: 100%;
}
ul.boxList li {
width: 100%;
height: 38px;
border: 1px solid blue;
background-color: #b3bab9;
text-align: center;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<div class="box">
<ul class="boxList">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>'Programming > 기본 (Baisc)' 카테고리의 다른 글
| [Oracle Linux8] 오라클 리눅스 8 Korean Language Pack 설치 (0) | 2024.02.02 |
|---|---|
| [ORACLE][오라클][SQLPLUS][ORA-28014] Oracle 12c ~ 19c 계정삭제 (0) | 2023.10.22 |
| [트위치][Twitch] 카테고리 목록 추출 (0) | 2023.02.27 |
| [크롬] 방문기록 추출 (0) | 2023.02.26 |
| [POLESTAR][모니터링][솔루션] 디렉토리 파일 개수 탐지 (0) | 2023.02.15 |
