홈>
모든 메뉴 항목의 너비가 가장 넓은 메뉴 표시 줄을 원합니다 (가장 넓은 너비). 메뉴 항목의 수는 다를 수 있습니다. 공간이 더 있으면 메뉴가 컨테이너 중앙에 있어야합니다.
항목이 한 행에 맞지 않으면 다른 행으로 줄 바꿈 될 수 있지만 여전히 같은 너비를 가져야합니다. 다음과 같은 것 :
| [ short ] [loooooooong] [ between ] |
| [ wrapped ] |
CSS로이 작업을 할 수 있습니까?
display : grid로 시도했지만 실패했습니다 :
.container {
border: 1px solid black;
display:inline-block;
}
.menu {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50px, -webkit-max-content));
grid-template-columns: repeat(auto-fit, minmax(50px, max-content));
justify-content: center;
grid-gap: 10px;
background: #eee;
}
.item {
border: 1px solid #aaa;
background: yellow;
white-space: nowrap;
}
<div class="container">
<h2>Two items</h2>
<p>
These should have equal widths (as wide as the widest one is) and be centered within the container.
</p>
<div class="menu">
<div class="item">Short</div>
<div class="item">Looooooooooong</div>
</div>
<p>
They are centered all right, but don't have equal widths.
</p>
<h2>Three items</h2>
<p>
These three should also have same width with each other.
</p>
<div class="menu">
<div class="item">First item</div>
<div class="item">Second item</div>
<div class="item">Third</div>
</div>
<p>
They are centered all right, but don't have equal widths.
</p>
<h2>So many items that they won't fit on one line</h2>
<p>
These should also have equal widths, but they should wrap to the next row. I don't care whether the second row is centered as long as the items are aligned with the row above.
</p>
<div class="menu">
<div class="item">First item</div>
<div class="item">Second item</div>
<div class="item">Third item, a longer one</div>
<div class="item">Fourth item</div>
<div class="item">Fifth item</div>
<div class="item">Sixth item</div>
<div class="item">Seventh item</div>
<div class="item">Eight item</div>
<div class="item">Ninth item</div>
<div class="item">Tenth item</div>
<div class="item">Item number 11</div>
<div class="item">Item number 12</div>
<div class="item">Item number 13</div>
<div class="item">Item number 14</div>
<div class="item">Item number 15</div>
<div class="item">Item number 16</div>
<div class="item">Item number 17</div>
<div class="item">Item number 18</div>
<div class="item">Item number 19</div>
<div class="item">Item number 20</div>
<div class="item">Item number 21</div>
<div class="item">Item number 22</div>
<div class="item">Item number 23</div>
</div>
<p>
They have equal widths, but the width is the min width given in minmax and the content doesn't fit within the item.
</p>
</div>
(CodePen과 동일 : https://codepen.io/jarnoan/pen/gxrEpR)
질문 중심 테이블 모양 레이아웃 CSS를 사용하여 너비가 같은 열을 사용합니까? 는 비슷하지만 버튼 수가 고정되어 있고 줄 바꿈이 없습니다.
표시 : 그리드 일 필요는 없습니다.
- 답변 # 1
- 답변 # 2
현재 같은 문제가 있습니다. 내가 생각해 낼 수있는 최선은.
.menu { display: flex; flex-wrap: wrap; justify-content: center; } .item { flex: 0 1 200px; text-align: center; }
이 방법은 일반적으로 메뉴 항목이 200 픽셀을 차지하지만 사용 가능한 공간이 충분하지 않으면 축소되고 내용이 필요한 경우 줄 바꿈합니다.
단점은 아이템이 200px 이상을 필요로한다면 아이템은 커지지 만 다른 아이템은 커지지 않는다는 것입니다. 그리고 모든 포장 항목은 중앙에 위치하며 왼쪽에 정렬되지 않습니다.
관련 자료
- r - 주파수 데이터 프레임 생성 및 이전 데이터 프레임에서 열 전송
- Create a column based on multiple columns - R에서 여러 열을 기반으로 열 만들기
- python - Pandas 데이터 프레임의 새 열을 만들고 셀 값의 값을 삽입하는 방법
- 하나는 열 인덱스이고 다른 하나는 R의 값인 두 열에서 행렬 만들기
- python - 값에서 열을 만들고 다른 열의 데이터로 채 웁니다 (get_dummies, label/one hot encoding)?
- pandas - 동일한 값을 가진 열을 비교하는 방법은 무엇입니까?
- R의 요인 변수 열에서 별도의 열 만들기
- python - 행과 열을 입력으로 사용하고 요소가 행과 열 번호의 곱인 2D 목록을 만들고 싶습니다
- javascript - react - div의 너비를 높이와 같게 만듭니다 높이가 올바르게 계산되지 않습니다
- pandas - df python에서 동적으로 열 생성
- css - 너비의 40 % 만 사용할 때 HTML에서 열을 가운데에 맞추는 방법
- sql - 일부 열이 0 인 중복 데이터 삭제
- sql - PostgreSQL 생성 개수, 고유 열 개수
- python - pandas - 마지막 n 개의 값을 포함하도록 n 개의 새 열 만들기 (롤링)
- python - 여러 열의 조건을 기반으로 Pandas에서 열 합계를 만드는 방법은 무엇입니까?
- r - bar/col 플롯에서 df의 여러 열을 쌓고 % 생성
- c - 두 숫자를 같은 간격으로 나누는 프로그램을 만들려면
- html - 각 열의 너비에 영향을주지 않고 표의 너비를 어떻게 설정합니까?
- python - 데이터 프레임에있는 열 수를 기반으로 여러 열을 병합하고 생성합니다
- mysql - 두 테이블에 대한 조인을 사용한 SQL 쿼리 및 두 번째 테이블에 여러 외래 키가있는 결과에 새 열 집합 생성
관련 질문
- html : 텍스트 계열, 두께 및 줄 높이가 부트 스트랩에서 작동하지 않습니다.
- html : 표 셀의 맨 아래에서 텍스트를 시작하려면 어떻게해야합니까?
- javascript : 전체 화면으로 슬라이드 쇼
- 요소에서 실행되는 한 줄 대신 DIV 랩에서 innerHTML을 만드는 방법
- html : 하단에 캡션이있는 이미지 옆에 테두리있는 텍스트를 배치하는 방법
- html : CSS 유틸리티를 정의하는 방법
- CSS 및 JavaScript에서 클릭시 햄버거를 표시하는 방법은 무엇입니까?
- Javascript — div에 이미지 삽입 시도
- html : VS code-인라인 스타일 개체에 반응하도록 인라인 스타일 문자열을 자동으로 변환하는 방법
- html : 수직 스크롤바를 더 얇게 만들고 오른쪽 하단의 빈 공간을 제거하는 방법은 무엇입니까?
1fr 1fr 1fr
를 해봤 니 (각각 전체의 단일 부분 (이 경우 열)을 나타냄)다른 사람들은 flexbox를 추천하지만 css-grid는 이론적으로 flexbox가 할 수있는 모든 것을 할 수 있지만 2 차원 (flexbox와 1w 만 비교)이라는 추가적인 이점이 있습니다. 또한 css-grid는 브라우저 수준에서 통합되므로 어떤 프레임 워크에도 의존하지 않습니다.