我在使用CSS時遇到了一些麻煩。特別是，每當我增加一個復選框的寬度時，它就會增加其周圍容器的大小，使其對齊方式遠離頁面的起始位置。這很難解釋，而我將在下面附上一張圖片，以更好地說明我的問題。
下面是我希望它的對齊方式，但要大一些：
這里是我增加寬度后的對齊方式：
同樣，我的目標是讓我的復選框能夠正確排列。
同樣，我的目標是增加復選框的寬度，同時保持其與頁面開始處的對齊。我沒有使用任何第三方的CSS庫，比如Bootstrap，如果有人想知道的話。我試著調整了margin、text-align和float等CSS屬性，但至今沒有成功。有沒有人有什么想法？我把相關的代碼貼在下面。
。input[type=text]/span>。
input[type=tel]。
選擇 {
margin: 5px;
border: 1px solid rgba（0, 0, 0, . 1）。)
border-radius: 4px;
height: 20px;
line-height: 20px;
padding-left: 5px;
}
input[type=text]/span>,
input[type=tel]。
label {
color: rgba(0, 0, 0, . 8)。
width: 176px;
}
label {
margin: 5px;
}
input[type=checkbox]/span> {
height: 20px;
width: 176px;
}<!DOCTYPE html>
<html lang="en-US">
<head>/span>
<title>學習Jquery</title>
<meta charset="utf-8"/span> />
< meta name="viewport" content="width=device-width, initial-scale=1" />
< link rel="styleheet" type="text/css" href="style. css" />
</head>
<body>
<h1 class="header"/span>> Header</h1>
< form id="input__form" action=" method="POST">
<!-- 附加輸入-->
<label for="input__zip"/span>> Zip</label><br />/span>
< input type="text" id="input__zip" name="input__zip" /> <br />>
<label for="input__current__employee"/span>> 當前雇員</label><br />/span>
< input type="checkbox"/span> id="input__current__employee" name="input__current__employee" /> <br />>
< input type="submit"/span> id="input__submit" name="input__submit" value="submit" />
</form>
</body>
</html>/span>uj5u.com熱心網友回復：
嘗試改變相對于高度的寬度 例如。 高度:20px。 寬度:20px;
這是因為當你在一個正方形的復選框上設定高度時，寬度必須是相同的，否則在理論上它會變成一個矩形，但該元素并不是這樣作業的，所以它仍然是一個正方形，但周圍有一種看不見的矩形。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/333721.html
標籤：