在設計手機端網頁時，常會遇到需要排列數字或字符的情況。為了更好地利用手機界面，我們經常需要將數字或字符橫向排列，以便在小屏幕上更好地顯示。這就需要使用CSS來完成。

下面介紹一種簡單的方法，將數字和字符橫向排列成類似于手機鍵盤的形式。

.keypad{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.key{
display: flex;
justify-content: center;
align-items: center;
width: 33.333%;
height: 50px;
border: 1px solid #b9b9b9;
font-size: 24px;
}

首先，創建一個父容器，并將其設置為彈性布局。設置其為自動換行的彈性布局，這樣可以讓內容自動排列到新一行中。

然后，創建一個子元素，即每一個按鍵，并將其設置為彈性布局。將其設置為居中對齊，這樣數字和字符就能夠豎直居中。設置一個寬度，以便幾個按鍵可以平均分布并填充整個父容器。設置一個高度和邊框，以便表示按下按鍵的效果，同時添加一個字體大小，以便顯示數字和字符。

使用這種方法可以實現一個類似于手機鍵盤的排列，能夠在小屏幕上方便地顯示數字和字符，以此提高用戶體驗。希望這篇介紹對您有所幫助。