CSS左右移動按鈕是一種常見的功能，可用于網站中的畫廊、輪播圖等。在本文中，我們將介紹如何使用CSS來創建一個具有左右移動按鈕的畫廊。

/*HTML代碼*/
<div class="gallery-container">
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
<img src="image6.jpg" alt="Image 6">
</div>
<div class="prev-button"></div>
<div class="next-button"></div>
</div>
/*CSS代碼*/
.gallery-container {
position: relative;
}
.gallery {
display: flex;
width: 100%;
overflow-x: auto;
}
.gallery img {
flex-shrink: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.prev-button,
.next-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: black;
color: white;
font-size: 30px;
padding: 10px 20px;
cursor: pointer;
}
.prev-button {
left: 0;
}
.next-button {
right: 0;
}

首先，我們創建了一個包含畫廊和左右移動按鈕的容器。畫廊使用了彈性盒子布局（flexbox），以便圖像能夠自動排列并適應容器的大小。在畫廊容器中，我們使用了overflow-x: auto;屬性，以使畫廊能夠水平滾動。

接下來，我們定義了圖像的樣式，以確保它們適應畫廊并適當地縮放。我們還使用了object-fit: cover;屬性，以便圖像能夠完全覆蓋它們的容器，而不會改變圖像的縱橫比。

最后，我們創建了左右移動按鈕。它們被定位在畫廊容器的兩側，并使用了絕對定位。我們還使用了transform: translateY(-50%);屬性，以便按鈕能夠垂直居中對齊。我們還定義了按鈕的背景和字體顏色、字體大小和光標樣式。

使用上述代碼，我們將創建一個具有左右移動按鈕的畫廊。