我正在嘗試在不手動對齊的情況下對齊輸入框頂部的文本。有關如何執行此操作的任何指示？
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="select-vehicle">
<label for="exampleDataList" class="form-label">Select Plate number</label>
<input class="select-vehicle-list" list="plate-number-list" id="exampleDataList" placeholder="Plate number">
<datalist id="plate-number-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</div>uj5u.com熱心網友回復：
使用legend標簽
您可以使用fieldset legend組合使用純 CSS 獲得類似的效果。請參閱下面的片段：
fieldset {
border-radius: 5px;
width: max-content;
border: 1px solid #D4D4D5;
}
legend {
font-size: 12px;
}
#exampleDataList {
width: 15rem;
border: none;
}
#exampleDataList:focus {
outline: none;
}<fieldset>
<legend>Select Plate number</legend>
<div class="select-vehicle">
<input placeholder="Plate number" list="plate-number-list" id="exampleDataList">
<datalist id="plate-number-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</div>
</fieldset>選擇
您可以給出label一個相對位置并將其移向您給出的圖片中的位置。請參閱下面的片段：
顯示代碼片段
.select-vehicle {
display: flex;
flex-direction: column;
}
.form-label {
font-size: 12px;
position: relative;
background: #fff;
width: max-content;
padding-inline: 5px;
top: .5rem;
left: .8rem;
}
#exampleDataList {
width: 15rem;
padding: .8rem 1rem;
border: 1px solid #D4D4D5;
border-radius: 5px;
}<div class="select-vehicle">
<label for="exampleDataList" class="form-label">Select Plate number</label>
<input placeholder="Plate number" list="plate-number-list" id="exampleDataList">
<datalist id="plate-number-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</div>更多關于 cssposition的資訊。
uj5u.com熱心網友回復：
在標題中提到了“傳奇”，并且圖片類似于 a<fieldset>并且 Bootstrap 已將欄位集 foobared 為無法識別。這是類似于欄位集的欄位集的 BS 類標記：
<fieldset class="border rounded p-2">
<legend class="float-none w-auto"></legend>
</fieldset>
我添加了.h6and.mb-0來<legend>減少font-sizeand margin-bottom。您確定需要一個<label>或正在向欄位集添加更多表單控制元件嗎？
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style></style>
</head>
<body>
<main class="container">
<section class="row">
<form>
<fieldset class="border rounded p-2">
<legend class="float-none w-auto mb-0 h6">Select State of Registeration: </legend>
<input id='state' name="state" class="form-control" list="state-list" placeholder='State'>
<datalist id="state-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</fieldset>
</form>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/432853.html
上一篇：選擇/編輯div內的所有子元素
下一篇：設定100%高度子部分