grid를 안쓰고 한줄에 li가 두개씩 배치

// 발단.

grid를 쓰지않고 한줄에 li가 두개씩 배치하고싶을때.

 

.ul-text-box80 li에 대한 width 속성이 calc(50% - 10px);로 설정되어 있기 때문에, 한 줄에 li 요소가 두 개씩 정렬됩니다.

이 코드에서 calc(50% - 10px);는 부모 요소의 너비의 50%에서 10px을 뺀 값을 li 요소의 너비로 설정하라는 의미입니다. 따라서 부모 요소의 너비를 기준으로 li 요소의 너비가 계산되며, 결과적으로 한 줄에 두 개의 li 요소가 들어갈 수 있는 너비가 됩니다.

<article class="xl-mg" data-aos="fade-up">
			<div class="container">
				<div class="little-content">
				<!-- system text -->
				<div class="system-container">
					<ul class="ul-text-box80">
						<li class="system-dot">
							<h4 class="sec-sub-tt3">| VOIS# STT |</h4>
								<p>지속적인 모델학습배포를 통한 인식율 향상,
									실시간 또는 배치모드 음성문자변환 지원
								</p>
						</li>
						<li>
							<h4 class="sec-sub-tt3">| VOIS# dTTS |</h4>
								<p>딥러닝(E2E)기반의 사람을 닮은 자연스러운 음성합성
								</p>
						</li>
						<li>
							<h4 class="sec-sub-tt3">| OSSMTM SV |</h4>
								<p>고객의 목소리를 통한 고객인증/본인인증 서비스 제공
								</p>
						</li>
						<li>
							<h4 class="sec-sub-tt3">| VOIS# NLU/TA |</h4>
								<p>자연어이해 (의도분류, 개체명인식, 질의응답),
									텍스트분석을 통한 자동분류, 검색
								</p>
						</li>
						<li>
							<h4 class="sec-sub-tt3">| VOIS# LLM |</h4>
								<p>생성형 초거대언어모델 기반의 생성형 대화봇
								</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</article>

 

 

/*ul*/
.ul-text-box80 {
	display: flex;
	flex-wrap: wrap;/*이게있어야 두개씩배치-내려라!*/
	gap: 20px;
}
.ul-text-box80 li {
	width: calc(50% - 10px); /*이게있어야 두개씩배치-내려라!*/
	padding: 10px;
	border: 1px solid #6d7c90;
	border-radius: 10px;
	box-sizing: border-box; /* 패딩과 테두리가 너비에 포함되도록 합니다. */
}

 

 

결과화면

.