按鈕與CSS表格對齊是Web開發中一個很基礎的問題,但是很多初學者會遇到困難。本文將介紹如何使用CSS來實現按鈕與表格的對齊。
<style> table { margin-bottom: 10px; border-collapse: collapse; } td { padding: 5px; border: 1px solid black; } .button { display: inline-block; padding: 5px 10px; background-color: #0077FF; color: white; text-decoration: none; border: none; border-radius: 5px; cursor: pointer; } </style> <table> <tr> <td>蘋果</td> <td><button class="button">購買</button></td> </tr> <tr> <td>香蕉</td> <td><button class="button">購買</button></td> </tr> </table>
以上代碼展示了如何使用CSS來定義表格和按鈕的樣式。需要注意的是,按鈕的樣式需要使用display: inline-block來將其變成行內塊級元素,這樣才能與表格對齊。
如果想要按鈕與文本垂直對齊,可以在按鈕上添加vertical-align: middle屬性。
下一篇按鈕填充顏色css