HTML中復選框的顯示經常是垂直排列的，但是在某些情況下，我們可能需要將多個復選框水平排列。下面介紹一下如何設置復選框水平。
首先，在HTML中使用標簽來創建復選框，并設置type屬性為"checkbox"。例如，下面的代碼創建了兩個復選框：
<input type="checkbox" name="option1" value="1"> Option 1 <input type="checkbox" name="option2" value="2"> Option 2默認情況下，這些復選框會垂直排列。要將它們水平排列，我們需要使用CSS樣式表。 在CSS中，可以使用display屬性來控制元素的布局方式。要將復選框水平排列，我們可以將它們放在一個
元素中，并將該元素的display屬性設置為"inline-block"。例如，下面的CSS代碼將復選框包裹在名為"checkbox-group"的DIV元素中，并將其display屬性設置為"inline-block"：
.checkbox-group {
display: inline-block;
}接下來，我們將應用這個樣式到我們的HTML代碼中。我們需要將DIV元素添加到每個復選框的外面。這可以使用使用p標簽，將這些代碼添加到元素中：
現在，我們已經將復選框放到了一個元素中，并將display屬性設置為"inline-block"。這將使得它們水平排列。如果我們有更多的復選框，我們只需要將它們添加到相同的<input type="checkbox" name="option1" value="1"> Option 1 <input type="checkbox" name="option2" value="2"> Option 2
元素中即可。
這是一個簡單的例子，展示了如何將復選框水平排列。自然地，如果我們需要更復雜的布局，我們可以更改CSS屬性，例如添加內邊距或邊框等等。
總之，HTML中的復選框默認垂直排列。但我們可以使用CSS樣式表來將它們排列為水平排列。我們可以將復選框放到一個
元素中，并將該元素的display屬性設置為"inline-block"。這樣，我們就可以使用簡單的CSS代碼來實現復選框水平排列。
上一篇vue $index定義
下一篇HTML怎么設置塊位置