을 사용하여 그룹 버튼을 만들고 ul li있습니다. 플로트 위해 liUL에서 나는 설정 display:table하는 값 ul과 display:table-cell행 li요소. Li요소에는 In this와 함께 텍스트 / 아이콘을 추가하는 데 사용되는 span 및 div 노드가 있습니다.
이것은 잘 작동합니다.
그러나 border-collapse:collapse테이블로 설정 하면 width:100%개념이 예상대로 작동하지 않습니다. 범위 (내부 li) 에 더 많은 텍스트를 제공 li하면 주어진 공간으로 감싸지 않고 너비가 증가합니다. 부모 div가있는 위치로 설정 width:100%했습니다 . 오버플로를 숨김으로 설정했지만 사용하지 않았습니다.ul300px
이 오버플로 문제는로 설정하면 해결 border-collapse:separate되지만 내 li요소 와 함께 두 배 두꺼운 테두리 (각 테두리 1px)를 원하지 않습니다 . 따라서 li더 많은 콘텐츠를 제공하더라도 텍스트를 내부로 감싸는 솔루션을 제공하십시오 border-collapse:collapse. 그렇지 않으면 border-collapse:separate이중 테두리가없는 옵션을 제안합니다 .
여기 내 플 런커
https://plnkr.co/edit/th0ylX4dccZmoSeURk77?p=preview
감사
작업에 flex를 사용하는 것이 좋습니다. 추가 display: flex컨테이너와 flex: 1 1 auto에 li요소. flex: 1 1 auto이 요소는 사용 가능한 모든 공간을 차지합니다.
또 다른 예 : http://jsfiddle.net/w23nuqvx/ .
.table_ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 300px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
/* flex-wrap: nowrap; disabling wrapping*/
list-style: none;
}
.cells_li {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
border-top: 1px solid red;
border-left: 1px solid red;
border-bottom: 1px solid red;
padding: .5em;
text-align: center;
}
.cells_li:last-child {
border-right: 1px solid red;
}<div id="group" class="main_div">
<ul class="table_ul">
<li class="cells_li"><div><span>fghjkjhgfdsdfghj</span></div></li>
<li class="cells_li"><div><span>Desktop</span></div></li>
<li class="cells_li"><div><span>DeskTop</span></div></li>
</ul>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다