iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
自我挑戰組

html與css粗淺新手入門教學系列 第 10

html 改變按鈕位子

  • 分享至 

  • xImage
  •  

昨天為止我們成功做出了多個按鈕並且在鼠標移上時改變了他的效果,今天我們想要改變按鈕的位子,讓他可以靠在最右邊
先來說說div有三種參數可以調整,分為margin、padding和border,想了解更多細節的話可以參考這篇文章https://ithelp.ithome.com.tw/articles/10205322
今天我們要用margin來實現按鈕靠右的目標,所以我先將這四個按鈕的class名稱分開,才不會一次改到四個按鈕

    <div class="column">
        <div class="but1">按鈕一</div><div class="but2">按鈕二</div><div class="but3">按鈕三</div><div class="but4">按鈕四</div>
    </div>

記得改完以後css內的class也要新增,不然其他按鈕的css效果會消失喔,用逗號隔開就可以一次定義多個class了,如下圖

        .but2, .but3, .but4{
        }

接下來我在but1的css中新增以下程式碼

            margin-left: 900px;

就是在第一個按鈕的左邊新增900px的距離,數字可以依照自己的需求調整,來移到想要的位子,如此一來我們就得到在標題欄右側的按鈕了
https://ithelp.ithome.com.tw/upload/images/20210911/20140086vzrgBlDgiK.jpg


上一篇
html鼠標移上改變圖樣和底色
下一篇
html 匯入圖片
系列文
html與css粗淺新手入門教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言