CSS 小技巧紀錄園地

文章目的

有鑑於在練習前端過程中，會遇到一些好用的 css 程式碼來呈現需要的網頁效果，但因為只是小技巧，不適合寫成一篇文章，因此利用此文章來為這些小技巧做個紀錄。

input number 隱藏預設加減箭頭方法

我們在使用 <input type="number> 時，有時候會因為預設的加減箭頭帶來困擾，且因為這兩個箭頭會導致我們的內容數字無法置中，這邊提供一段程式碼來隱藏這兩個箭頭。

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;

這樣我們就可以達到隱藏箭頭的效果囉。
參考文章 — Center text in html number input

如何不依賴套件製作 x 軸滾動

有時候會因為網頁效果需要我們要將某部分區域做成僅有 x 軸滾動效果，而非預設的 y 軸滾動，在不依賴套件的情況下，該如何達到目的？筆者將在此文章中分享自己的方法。

效果介紹

首先，我們要有一個認知在我們固定一個區域的寬高之後(通常是 div)，裡面的內容會觸發 overflow 這個屬性，並且我們知道 html 中預設 overflow 發生時 div 通常會是 y 軸滾動來讓使用者查看超出的內容，但今天我們不想要這個預設效果，我們 overflow 的內容想改成 x 軸滾動來查看，這就是我們這次的目的。

css 說明

了解了原理，接下來就來看看程式碼吧，我們先看程式碼筆者再來做講解：

<section class="recommandArea">
    <div class="card" style="width: 18rem;" v-for="(item, index) in recommand" :key="index">
        <div class="card-body">
            <h5 class="card-title">{{item}}</h5>
            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
        </div>
    </div>
</section>

上面的 html 程式碼是筆者想要在 section 中創造出複數個 bootstrap 4 的卡片元件(這邊是利用 v-for 達到，不懂這個沒關係，只要知道 section 中會產生複數個卡片元件即可。)

.recommandArea {
    overflow-x: scroll;
    white-space: nowrap;
    width: 100vw; /*寬度為100%的裝置寬*/
}
.card {
    display: inline-block;
    white-space: normal
}

接著我們來看看 css 的部分，因為我們需要 x 軸滾動效果，所以需要定義 section 的寬度，因為我們是要 x 軸滾動因此下 overflow-x: scroll 達到目的。
接著最重要的來了，我們必須下 white-space: nowrap讓文字元素不能換行，此目的是為了讓內容可以 overflow，但今天我們要 overflow 的卡片是 div 元素，所以我們透過 display: inline-block 來改變它，這樣子它就可以吃到 white-space: nowrap 的效果囉!!
步驟進行到這裡，應該就會有一個僅有x軸滾動的卡片列表囉!!!

參考資料

horizontal scrollbar
Div with horizontal scrolling only