如何使选择下拉宽度相同？答案

【问题标题】：How to make select dropwdown width same?如何使选择下拉宽度相同？
【发布时间】：2022-01-06 18:39:39
【问题描述】：

我想让两个选择的宽度相同。意味着无论选项值如何，我都希望选择宽度相同我想使两个选择的宽度相同。意味着无论选项值如何，我都希望选择宽度相同

<!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/bootstrap@4.6.1/dist/css/bootstrap.min.css">
   <!-- jQuery library -->
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
   <!-- Popper JS -->
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <!-- Latest compiled JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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>

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

我认为应该像使用 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/bootstrap@4.6.1/dist/css/bootstrap.min.css">
   <!-- jQuery library -->
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
   <!-- Popper JS -->
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <!-- Latest compiled JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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>

【讨论】：

【解决方案2】：

您可以修改 select 元素以具有明确的宽度：在下面运行 sn-p。

<!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/bootstrap@4.6.1/dist/css/bootstrap.min.css">
   <!-- jQuery library -->
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
   <!-- Popper JS -->
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <!-- Latest compiled JavaScript -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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>

【讨论】：