Question

我在CSS中初始化了选择宽度，当附加一个选项时，宽度会发生变化。如何避免宽度的变化？

＆＃13;

$(document).ready(function(){
  $("button").click(function(){
    $("select").append("<option>example.example.example</option>");
  });
 });

＆＃13;

select { width:100%; }
table { width:100%; }
div { width:200px; height:50px; background-color:grey; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <table>
  <tr><td>Label</td>
      <td><select>
           <option>Select</option>
          </select>
       </td>
  </tr>
 </table>
</div>
<button>Click</button>

＆＃13;

Answer 1

您将width设置为100%。它位于表格内，表格将根据其内容的大小进行调整。如果您希望它是一个确切的大小，您必须指定您希望它的大小。如果您希望它是100％的父级，那么您必须使用具有宽度设置的div的父级。表元素是灵活的，这也是您获得此行为的原因。

如果您想要响应式行为，通常可以使用响应式单元而不是表或百分比。 em是一个常见的响应单位。 Here's more info on this unit from css-tricks.您还可以使用vw或其他与屏幕尺寸相关的其他单位，但不能使用其父元素

在表格中添加时选择宽度更改？

1 个答案: