CSS를 사용하여 목록의 모든 항목에 대해 동일한 너비를 얻는 방법은 무엇입니까?

CSS를 사용하는 모든 항목의 동일한 너비

많은 상황에서 모든 항목의 너비가 가장 넓은 것과 동일한 레이아웃을 원할 수 있습니다. 요소가 모두 한 줄에 맞지 않는 경우에도 마찬가지입니다. 이는 시각적으로 더욱 매력적이고 응집력 있는 결과를 제공할 수 있습니다.

CSS 솔루션

JavaScript를 사용하여 이 효과를 얻을 수도 있지만 CSS. 다음 코드를 고려하십시오.

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

작동 방식

이 CSS 코드는 flexbox와 inline-flex의 조합을 활용하여 원하는 레이아웃을 얻습니다.

• .list-container: 이 상위 요소는 목록의 가로 레이아웃을 설정하여 목록이 나란히 표시되도록 합니다.
• .list: .list-container 내부의 하위 요소는 세로 열로 표시됩니다. flex-direction:column.
• .list-item: 각 개별 항목은 flex-wrap:wrap 및 justify-content: flex-start를 사용하여 가장 넓은 항목과 일치하도록 너비를 설정합니다. 이렇게 하면 모든 요소가 목록에서 가장 넓은 요소와 동일한 너비를 갖게 됩니다.

위 내용은 CSS를 사용하여 목록의 모든 항목에 대해 동일한 너비를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!