Question

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>

<body>
  <div class="col-md-6 valtype" id="pass_val">Type :
    <div class="">
      <select name="" aria-controls="" class="form-control select-focus">
        <option value="">Select</option>
        <option value="4"> Debtor out of area</option>
        <option value="5"> Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area</option>
        <option value="29">Consumer old</option>
        <option value="6">determine action</option>

      </select><span></span></div>
  </div>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>

<body>
  <div class="col-md-6 valtype" id="pass_val">Type :
    <div class="">
      <select name="" aria-controls="" class="form-control select-focus">
        <option value="">Select</option>
        <option value="4"> Debtor out of area</option>
        <option value="5"> Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area</option>
        <option value="29">Consumer old</option>
        <option value="6">determine action</option>

      </select><span></span></div>
  </div>

</body>

</html>

我有一个下拉列表，但这是一个问题，当内容增加时，选项的宽度也会增加，但是select的宽度保持不变。

因此，如果要增加内容，我希望该选项的宽度保持等于选择宽度。

Answer 1

如果我正确理解了您的问题是您想要的话：
当您选择一个选项时，无论选择了哪个选项，select标记都将保持不变并且不会更改其大小，因此我提出了解决方案：

#mySelect select
{ 
width:150px; 
}

<div id='mySelect'>
      <select name="" aria-controls="" class="form-control select-focus">
        <option value="">Select</option>
        <option value="4"> Debtor out of area</option>
        <option value="5"> Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area Debtor out of area</option>
        <option value="29">Consumer old</option>
        <option value="6">determine action</option>

      </select><span></span></div>
  </div>

希望我的回答可以为您提供帮助

如何使用CSS使用<select>标签的宽度设置<option>标签的宽度？

1 个答案: