CSS 레이아웃에서 display:inline-block으로 인해 발생하는 격차를 해결하는 방법에 대한 자세한 설명
- 伊谢尔伦원래의
- 2017-05-30 13:42:272089검색
H5 수평 슬라이딩 카드를 만들 때 display:inline-block을 사용했는데 동일한 수평선의 요소 사이에 간격이 있는 것을 발견했습니다. 이는 분명히 제가 원하는 효과가 아니어서 왼쪽 부동으로 변경했습니다. 문제는 해결되었으나 수평 좌우 스크롤을 위해서는 부모 요소의 너비를 설정해야 하므로 코드의 양이 늘어나게 됩니다. 카드 수가 고정되어 있지 않기 때문에 부모 요소의 너비를 에서 설정해야 합니다. 실시간 JS를 사용하다보니 코드량이 늘어나서 최선의 선택은 아닙니다. 가장 좋은 해결책은 display:inline-block;을 사용하는 것 같아서 gap 문제가 발생합니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>document</title>
<style>
*{margin:0;padding:0;}
.box{overflow-x:auto;background:#fff;white-space:nowrap;}
.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;}
</style>
</head>
<body>
<p class="box">
<span>111</span>
<span>111</span>
<span>111</span>
<span>111</span>
</p>
</body>
</html>효과는 다음과 같습니다.
이 성능은 사양을 준수하며 줄 바꿈으로 인한 공백 문자로 인해 발생한다고 합니다. 그러나 이 효과는 분명히 우리가 원하는 차이가 아니며 실제 필요에 따라 설정한 마진입니다. 그렇다면 이 격차를 어떻게 해소할 수 있을까요? 세 가지 방법이 있습니다:
방법 1: 요소 사이에 줄 바꿈이 없습니다. 코드는 다음과 같습니다.
<p class="box"> <span>111</span><span>111</span><span>111</span><span>111</span> </p>
효과는 다음과 같습니다.
방법 2: 글꼴 설정- size:0을 상위 요소로 설정하고 원하는 실제 글꼴 크기로 설정합니다. 아쉬운 점은 크롬, 오페라 등 일부 브라우저에는 최소 글꼴 설정이 있는데 현재 크롬에는 이 설정이 없는 것 같습니다. 코드는 다음과 같습니다.
css:
.box{overflow-x:auto;background:#fff;white-space:nowrap;font-size:0;}
.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;font-size:14px;}html:
<p class="box">
<span>111</span>
<span>111</span>
<span>111</span>
<span>111</span>
</p>효과는 다음과 같습니다:
방법 3: 음수 여백 방법 이 간격은 글꼴 크기와 관련이 있으므로 간격은 특정 값이 아닙니다.
위의 세 가지 방법 중 처음 두 가지가 더 나은 솔루션이며 세 번째 방법은 권장되지 않습니다. 온라인에는 다른 솔루션이 있지만 처음 두 가지가 더 낫다고 생각합니다.
위 내용은 CSS 레이아웃에서 display:inline-block으로 인해 발생하는 격차를 해결하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!