display:inline-block 레이아웃으로 인한 격차를 해결하는 CSS 방법;-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

display:inline-block 레이아웃으로 인한 격차를 해결하는 CSS 방법;

巴扎黑

May 21, 2017 am 10:38 AM

Block inline 갭

이 글에서는 display:inline-block;으로 인해 발생하는 gap(gap)을 해결하기 위한 CSS의 방법을 주로 소개합니다. 필요한 경우 참고할 만한 가치가 있습니다.

오늘 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: 상위 요소 세트에 대해 글꼴 크기: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: 음수 여백 방식의 경우 이 간격은 글꼴 크기와 관련이 있으므로 간격이 특정 값이 아니라는 점에 유의해야 합니다.

위의 세 가지 방법 중 처음 두 가지 방법이 더 나은 솔루션이며, 세 번째 방법은 권장되지 않습니다. 온라인에는 다른 솔루션이 있지만 처음 두 가지가 더 낫다고 생각합니다.

PS:

대부분의 프런트엔드 전문가의 의견과 제안을 바탕으로, 공백을 없애기 위해 display:flex를 상위 요소로 설정할 수도 있으며, 코드의 양은 다음과 같습니다. 적지만 내 수준에서는 사용됩니다. 카드 슬라이딩 효과로 인해 모든 요소가 보이는 창에 표시되고 수평 좌우 슬라이딩이 불가능합니다.

위 내용은 display:inline-block 레이아웃으로 인한 격차를 해결하는 CSS 방법;의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.