當我們在進行網頁設計時，常常需要讓一些內容在點擊后出現，而且為了更好的展示效果，我們希望這些內容是橫向排列的。那么該如何實現呢？

這就需要用到 CSS 中的 display 屬性了，它可以幫助我們控制元素的顯示方式。

/* CSS代碼 */
.container {
display: flex;  /* 先將容器設置為彈性布局 */
flex-wrap: nowrap;  /* 設定彈性布局不換行 */
overflow-x: hidden;  /* 設定橫向滾動條隱藏 */
cursor: pointer;  /* hover時顯示手形光標 */
}
.item {
flex-shrink: 0;  /* 設定子元素不縮小 */
width: 100px;  /* 設定子元素寬度，可根據需求自行調整 */
height: 100px;  /* 設定子元素高度，可根據需求自行調整 */
margin-right: 10px;  /* 設定子元素的右邊距，可根據需求自行調整 */
background-color: #ccc;  /* 設定子元素的背景顏色，可根據需求自行調整 */
transition: all 0.3s ease;  /* 設定子元素過渡效果 */
}
.item:hover {
transform: scale(1.1);  /* 設定子元素hover時放大 */
background-color: #f00;  /* 設定子元素hover時背景顏色變紅 */
}

接下來，我們需要用 JavaScript 來實現點擊顯示效果。

/* JavaScript代碼 */
var container = document.querySelector('.container');  /* 獲取容器元素 */
var isShow = false;  /* 初始狀態為隱藏 */
container.addEventListener('click', function() {
if (!isShow) {  /* 判斷當前狀態是否為隱藏 */
container.style.overflowX = 'scroll';  /* 顯示橫向滾動條 */
isShow = true;
} else {
container.style.overflowX = 'hidden';  /* 隱藏橫向滾動條 */
isShow = false;
}
});

到這里就完成了點擊后展示橫向排列的內容效果了！當然，這只是一個簡單的實例，您可以根據需要對代碼進行調整和優化。