CSS有許多非常實用的樣式,例如在網頁中添加兩個按鈕并將它們隔開是一個常見需求。下面我們通過代碼介紹如何實現這個效果。
.button{ width: 100px; height: 30px; background-color: #F8E82B; border: none; border-radius: 5px; font-size: 16px; color: #fff; cursor: pointer; } .button-container{ display: flex; justify-content: space-between; margin: 20px 0; }
首先,我們需要設置按鈕的樣式。在上面的代碼中,我們設置了按鈕的寬度、高度、背景色、邊框、圓角、字體大小、字體顏色以及鼠標樣式。
然后,我們需要創建一個容器來裝載兩個按鈕。在這個容器上,我們使用了CSS中的flex布局,并設置了justify-content屬性為space-between,這個屬性可以讓兩個按鈕之間的距離自動拉開。
<div class="button-container"> <button class="button">按鈕1</button> <button class="button">按鈕2</button> </div>
最后,我們將兩個按鈕放置在剛剛創建的容器里,注意兩個按鈕都應該指定class為"button"。
通過以上的代碼和解釋,我們可以輕松實現兩個按鈕隔開的效果。
上一篇mysql的實訓目的
下一篇css 不許換行