在 HTML 中的按鈕之間新增空間
-
在 HTML 中在兩個按鈕之間新增一個空的
div
元素以新增它們之間的空間 -
在 HTML 中使用
margin-right
屬性的按鈕之間放置空間 -
在 HTML 中使用
margin-right
屬性和not(:last-child)
選擇器的多個按鈕之間提供空間
本文將介紹幾種在兩個 HTML 按鈕之間田間空間的方法。
在 HTML 中在兩個按鈕之間新增一個空的 div
元素以新增它們之間的空間
可以在兩個按鈕之間新增一個空的 div
以在它們之間新增一個空格。然後,我們可以為 div
提供一些寬度,從而在按鈕之間建立一些空間。
預設情況下,div 具有 block
的 display
屬性。這意味著 div
佔據其位置的一整行。
如果我們在 div
之後新增一個元素,該元素將被放置在瀏覽器中的 div
下方。
因此我們必須將 div
的顯示屬性更改為 inline-block
。inline-block
元素具有塊和內聯的屬性。
inline-block
元素可以具有寬度、邊距、填充等,但與 block
元素不同,它們不會佔據其位置的整行。
例如,建立一個 div
;在那個 div
中,使用 button
標籤建立兩個按鈕。將這些按鈕命名為 Button 1
和 Button 2
。
在這些按鈕之間建立一個 div
並給它一個 space
類。這個 div
不應包含任何元素。
在 CSS 中選擇內部的 div
及其類 space
,並將 display
屬性設定為 inner-block
。根據要求給 div
一些寬度。
請注意,width
的值將是按鈕之間的空間。此外,將 height
屬性設定為 auto
,以便 div
僅採用所需的高度。
下面的示例顯示兩個按鈕的空間為 4px
。
示例程式碼:
<div>
<button>
Button 1
</button>
<div class="space">
</div>
<button>
Button 2
</button>
</div>
.space {
width: 4px;
height: auto;
display: inline-block;
}
在 HTML 中使用 margin-right
屬性的按鈕之間放置空間
CSS margin
屬性在任何已定義邊界之外的元素周圍建立空間。margin 屬性結合了四個屬性:margin-top
、margin-bottom
、margin-left
和 margin-right
。
margin-top
屬性在元素的頂部建立空間。同樣,margin-bottom
、margin-right
和 margin-left
屬性在元素的底部、右側和左側建立空間。
我們可以使用第一個按鈕元素的 margin-right
屬性在按鈕之間建立一個空間。
結果,將在按鈕右側建立一定寬度的邊距。然後,另一個按鈕將位於邊距旁邊。
例如,使用 button
標籤和名稱 Button 1
和 Button 2
建立兩個按鈕。將按鈕的類別設定為 B1
和 B2
。
在 CSS 中,選擇 B1
類並將其 margin-right
屬性設定為 4px
。這將在 Button 1
右側建立一個 4px
空間,在兩個按鈕之間建立一個空間。
示例程式碼:
<button class="B1">
Button1
</button>
<button class="B2">
Button2
</button>
.B1 {
margin-right: 4px;
}
在 HTML 中使用 margin-right
屬性和 not(:last-child)
選擇器的多個按鈕之間提供空間
我們可以使用 margin-right
屬性和 CSS not()
選擇器在多個按鈕之間田間空間。這種方法背後的邏輯是我們將使用 margin-right
屬性在每個按鈕之間建立空間,就像在第二種方法中一樣。
但是,我們不會在最後一個按鈕之後建立空格。
為此,我們將使用 not()
選擇器。在裡面,not 選擇器,我們可以使用:last-child
。
:last-child
選擇器表示容器內的最後一個孩子。作為一個整體,我們可以應用以下規則來應用樣式。
.container>.button:not(:last-child){
}
>
符號選擇 container
內的每個子項。結果,樣式將應用於父 container
內具有類 button
的所有子代,除了最後一個子代。
例如,建立一個 div
並給它一個 container
類。
在 div
中,建立三個按鈕並將它們命名為 Button 1
、Button 2
和 Button 3
。此外,將 button
設定為每個按鈕的類。
現在,使用上面提到的規則在 CSS 中設定樣式。在規則內部,使用 margin-right
屬性並將其設定為 10px
以在子元素或按鈕之間新增空間 10px
。
下面的例子顯示三個按鈕之間有一個 10px
的空間。
示例程式碼:
<div class='container'>
<button class='button'>Button 1</button>
<button class='button'>Button 2</button>
<button class='button'>Button 3</button>
</div>
.container>.button:not(:last-child) {
margin-right: 10px;
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn