CSS에서 가로 스크롤 막대를 구현하는 두 가지 방법(코드 예제)

이 장에서는 CSS를 사용하여 가로 스크롤 막대를 구현하는 두 가지 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

html 코드:

<div class="nav_wrap">
    <ul class="nav_mine">
        <li class="nav_item">全部</li>
        <li class="nav_item">Adobe</li>
        <li class="nav_item">微软</li>
        <li class="nav_item">会计</li>
        <li class="nav_item">绘画</li>
        <li class="nav_item">Adobe</li>
        <li class="nav_item">微软</li>
        <li class="nav_item">会计</li>
        <li class="nav_item">绘画</li>
    </ul>
</div>
<script src="node_modules/jQuery/tmp/jquery.js"></script>

1. 가로 스크롤바 구현을 위한 원본 CSS + jquery (네이티브 js 구현 가능, 편의상 jQuery 사용)

css 코드:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}
.nav_wrap{
    overflow-x: scroll;
}
.nav_mine {
    padding: 15px 10px;
    border-bottom: 1px solid #aca9a7;
    height: 75px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.nav_mine .nav_item {
    border: 1px solid #1a110b;
    border-radius: 40px;
    color: #aca9a7;
    margin-right: 10px;
    font-size: 24px;
    padding: 4px 18px;
    float: left;
    list-style: none;
}

js 코드:

$(function(){
    var width = 0;
    for (let i = 0; i < $(&#39;.nav_item&#39;).length; i++) {
        width += $(&#39;.nav_item&#39;).eq(i).outerWidth(true);
    }
    $(&#39;.nav_mine&#39;).width(width+20);  //width只是内容的宽度，需要加上padding的宽度
})

추신: js를 사용하는 이유는 탭이 몇 개인지 모르기 때문에 너비를 하드 코딩할 수 없기 때문입니다. 탭의 너비를 동적으로 얻은 다음 이를 합산하여 총계를 얻을 수 있습니다. 여러 용도에 편리한 너비입니다. externalWidth와 매개변수 true는 패딩+여백+테두리를 포함한 너비를 나타냅니다.

twoCSS3 -- flex

css code:

* {
    box-sizing: border-box;
}

.nav_mine {
    padding: 15px 20px;
    border-bottom: 1px solid #aca9a7;
    height: 75px;
    display: flex;
    align-items: center;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

.nav_mine .nav_item {
    border: 1px solid #aca9a7;
    border-radius: 40px;
    color: #aca9a7;
    margin-right: 22px;
    font-size: 24px;
    padding: 4px 18px;
    list-style: none;
    white-space: nowrap;
}

white-space의 경우 항목이 white-space:nowrap을 사용하지 않는 경우 너비가 설정되지 않은 경우 문제가 발견됩니다. 줄 바꿈은 안 되지만 한자는 줄 바꿈이 됩니다. 온라인에서 확인해보니 공백은 줄 바꿈 여부를 식별하는 데 사용됩니다. 단어는 하나의 문자로 처리됩니다. 따라서 한자와 영어에 사용해야 합니다. 공백:nowrap을 줄바꿈하지 않도록 설정해야 합니다. 한자와 영문의 차이로 인해 폭이 일정하지 않기 때문에 1~2픽셀 정도 남겨두어야 합니다.

위 내용은 CSS에서 가로 스크롤 막대를 구현하는 두 가지 방법(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!