我想使兩個選擇的寬度相同。意味著我希望兩個選擇寬度相同，而不管選項值如何我想使兩個選擇的寬度相同。意味著無論選項值如何，我都希望選擇寬度相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
</head>
<body>
<div class="col-lg-3">
<div class="d-flex justify-content-around mb-3">
<label for="FB">Filter by:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>Emplyee A</option>
<option value="1">Emplyee B</option>
<option value="2">Emplyee C</option>
<option value="3">Emplyee D</option>
</select>
</div>
<div class="d-flex justify-content-around">
<label for="FB">Data Range:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>This Week</option>
<option value="1">Last Week</option>
<option value="2">Last month</option>
<option value="3">Last quater</option>
<option value="4">Custom range</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
我認為應該像使用 CSS 設定相關選擇元素的寬度一樣簡單：
select{ width: 16ch; }<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
</head>
<body>
<div class="col-lg-3">
<div class="d-flex justify-content-around mb-3">
<label for="FB">Filter by:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>Emplyee A</option>
<option value="1">Emplyee B</option>
<option value="2">Emplyee C</option>
<option value="3">Emplyee D</option>
</select>
</div>
<div class="d-flex justify-content-around">
<label for="FB">Data Range:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>This Week</option>
<option value="1">Last Week</option>
<option value="2">Last month</option>
<option value="3">Last quater</option>
<option value="4">Custom range</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
您可以修改select元素以具有明確的寬度：運行下面的代碼段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
<style type="text/css">
.form-select {
width:200px
}
</style>
</head>
<body>
<div class="col-lg-3">
<div class="d-flex justify-content-around mb-3">
<label for="FB">Filter by:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>Emplyee A</option>
<option value="1">Emplyee B</option>
<option value="2">Emplyee C</option>
<option value="3">Emplyee D</option>
</select>
</div>
<div class="d-flex justify-content-around">
<label for="FB">Data Range:</label>
<select class="form-select form-select-sm" aria-label=".form-select-sm example" data-width="100%">
<option selected>This Week</option>
<option value="1">Last Week</option>
<option value="2">Last month</option>
<option value="3">Last quater</option>
<option value="4">Custom range</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/407514.html
標籤：