如何使用CSS在各種瀏覽器上對齊複選框和其標籤？
- PHPz轉載
- 2023-08-27 10:49:02878瀏覽
Web forms are popularly used in modern websites. For webforms, we have a common element known as checkboxes. However, aligning these checkboxes and their labels in different browsers a. is because it may be displayed differently in different browsers and devices. When it comes to display of checkboxes, different browsers may have slightly different styles and rendering methods. Towsers wet slightly thesent styles 和 rendering 外. labels using CSS on cross-browsers.
不同瀏覽器中複選框的顯示方式是怎樣的？
不同的瀏覽器對Web表單中的複選框有不同的相容性。在Internet Explorer中，複選框的外觀取決於版本。舊版本不支援最新的CSS特性，因此很難對齊複選框和它們的標籤。 Mozilla Firefox和Safari的版本也是如此。
因此，為了確保複選框和標籤的一致顯示和正確對齊，我們必須在CSS中使用跨瀏覽器相容技術。
注意− 在建立網頁表單時，使用for屬性與任何類型的輸入元素通常是一個好的做法。這樣可以確保複選框和其標籤對齊。始終確保的for屬性值與的id屬性值相同。
我們有幾種CSS技術和實踐，以確保在不同平台上複選框和標籤的正確對齊。下面討論了其中一些。
使用vertical-align樣式化複選框
使用display和vertical-align屬性，我們可以將複選框和其標籤對齊。
範例
在這裡，「display: inline-block」屬性使我們能夠將複選框的顯示類型設為內聯區塊。而“vertical-align: middle”屬性將垂直地將複選框與其容器居中對齊。
同時使用這兩個屬性將確保複選框與其他元素在同一行顯示，並在行的中間對齊。因此，複選框及其標籤將在同一行上對齊，使標籤的文字與複選框保持居中對齊。
<html>
<head>
<style>
input[type="checkbox"] {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
</style>
</head>
<body>
<h2> Checkbox </h2>
<div class="container">
<label for="demo">
<input type="checkbox" id="demo"> Option 1 </label>
<br>
<label for="demo">
<input type="checkbox" id="demo"> Option 2 </label>
</div>
</body>
</html>
使用CSS Flexbox
我們可以將元素作為彈性容器來對齊複選框和標籤。
範例
在這個範例中，我們透過使用 display: flex 將標籤元素作為一個彈性容器。 align-items: center 屬性將標籤的文字與複選框居中對齊。
雖然我們在輸入元素中使用了 flex: none 來確保複選框的寬度不會隨標籤（容器）大小的變化而改變。同時，使用這三個屬性可以使複選框和標籤在水平方向上居中對齊。
<html>
<head>
<style>
.container {
display: flex;
align-items: center;
padding: 2px;
}
input[type=checkbox] {
flex: none;
}
</style>
</head>
<body>
<h2> Fruits </h2>
<div>
<label for="demo" class="container">
<input type="checkbox" id="demo"> Mango </label>
<br>
<label for="demo" class="container">
<input type="checkbox" id="demo"> Banana </label>
</div>
</body>
</html>
使用vertical-align屬性
複選框預設情況下在一些現代瀏覽器中與標籤文字的基線對齊。然而，為了確保它們的正確對齊，我們可以為標籤和輸入元素設定vertical-align屬性為“top”。
範例
在下面的範例中，我們使用「display: inline-block」屬性將標籤（class= "container"）和輸入元素顯示為內嵌區塊元素。這使得這兩個元素都是內聯的，其尺寸可以調整“input[type="checkbox"]” is a selector which is used to select or match the checkbox type of input element.
此外，我們使用了「vertical-align: top」屬性將元素垂直對齊到其容器的頂部。同時使用這些屬性來對標籤和輸入元素進行設置，確保它們都垂直對齊在容器的頂部，並且相對於彼此以行內方式顯示。
<html>
<head>
<style>
.container {
display: inline-block;
vertical-align: top;
margin-right: 15px;
letter-spacing: 1px;
}
input[type="checkbox"] {
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<h2> Programming Languages </h2>
<div>
<label for="demo" class="container">
<input type="checkbox" id="demo"> JavaScript </label>
<br>
<label for="demo" class="container">
<input type="checkbox" id="demo"> Python </label>
</div>
</body>
</html>
使用Position和Vertical-align屬性
保持輸入元素的position屬性為relative，並使用vertical-align: bottom屬性也可以對齊複選框和標籤。
範例
在這裡，我們將標籤設為區塊級元素，以便它佔據容器的整個寬度。移除輸入元素的內邊距和外邊距。使用vertical-align: bottom屬性可以使複選框在垂直方向上與容器底部對齊。使用position屬性可以將複選框與標籤對齊。
<html>
<head>
<style>
CSS code * {
padding: 0;
margin: 0;
}
.container {
display: block;
padding-left: 20px;
}
input {
width: 17px;
height: 17px;
vertical-align: bottom;
position: relative;
top: -1px;
}
</style>
</head>
<body>
<h2> Programming Languages </h2>
<br>
<div>
<label for="demo" class="container">
<input type="checkbox" id="demo"> JavaScript </label>
<br>
<label for="demo" class="container">
<input type="checkbox" id="demo"> Python </label>
</div>
</body>
</html>
結論
Web forms are fundamental component of web development which are popularly used. To make it cross-browser compatible, we should make sure that alignment of input and label element should be proper. This and devices.
以上是如何使用CSS在各種瀏覽器上對齊複選框和其標籤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！