나는 width: 100%; 컨테이너 안에 <ul>을 가지고 있습니다.한계 백분율 기반 폭
각 <li>은 width: 25%;입니다.
li 요소에 margin-left을 갖고 싶지만 너비가 높아집니다. http://jsfiddle.net/u3hTW/
에 '문제를 해결, 나는 li 요소 box-sizing을 적용하고 margin 대신 padding를 사용하지만 수'키커 '나는 nth-child(1)에 원하는 것입니다 : 여기
margin 또는
padding이 없으므로 나머지
li 요소와 다르게 보입니다. 이 접근 할 수있는 더 좋은 방법이 있는지 궁금하고
http://jsfiddle.net/u3hTW/1/
:
여기에 그것을 보여주는 바이올린입니다. 목표는 첫 번째 하위 요소를 제외한 모든 요소 사이에 공백이있는 % 기반 폭을 유지하는 것입니다.
가 나는를 사용하는 것이 좋습니다 것입니다 : 크리스 Coyier에 의해 수행으로 비교적 새로운 CSS boxmodel에 대한 compleet 가이드는 여기에서 볼 수 있습니다
사용 인 flexbox은 (browsersupport 사용자의 요구 사항을 충족하는지 확인하시기 바랍니다) 너비와 마진에 대한 %. 나중에 뭔가 다른 내부 패딩이 필요하거나 패딩 크로스 브라우저 박스 크기 조정 문제로 실행 할 수 있기 때문에 일반적으로
.list li {
float: left;
width: 23%;
margin-left: 2.66%;
}
.list li:nth-child(1) {
margin-left: 0%;
}
이것이 내가 할 일이다. 답장을 보내 주셔서 감사합니다. 어떤 종류의 크로스 브라우저 박스 크기 문제가 패딩과 관련이 있습니까? 내가 상자 크기 조정과 패딩을 종종하기 때문에 나는 호기심이 많다. – justinw
최근 모바일 사이트에서 문제가 있었지만 대부분의 모바일 브라우저에서 지원되는 것으로 목록에 표시됩니다. 우리는 일부 게임 콘솔 브라우저에서도이 사이트를 테스트 했으므로 아마도 그럴 것입니다. 어떤 경우에는 아마도 문제가 아닙니다. – cjspurgeon
당신은 이미 각 li 요소의 너비가 4x25 %로 100 % 사용하고 있습니다. 따라서 마진을 추가하면 < 컨테이너 div의 25 %가 남아 있기 때문에 마지막으로 마침표가 점프됩니다.
당신이 할 수있는 것은 :
은 리튬이 23 % 정도 같은, 약간 작다 확인하고 여백에 대한 비율을 사용합니다. 모든 것이 균등하게 분리되도록 약간의 계산이 필요합니다. http://css-tricks.com/snippets/css/a-guide-to-flexbox/
상자 크기는 패딩을 사용하는 경우에만 도움이됩니다. 여백은 항상 너비에 추가됩니다. –