Question

这是我的fiddle

我在选择框中有一些选项你可以看到，现在我的问题是该选项中的文字应该自动调整选择的宽度我该如何实现？有人可以帮助我吗？

<select>
    <option>Legal, Credits and Links</option>
    <option>External Resources</option>
    <option>Frameworks and Extensions</option>
    <option>Ajax Requests</option>
    <option>Fiddle Options</option>
</select>

select{
    border: 1px solid #111;
    background: #fff;
    width: 150px;
    padding: 5px;
    font-size: 13px;
    border: 1px solid #ccc;
    height: 30px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0px;
     }

谢谢。

Answer 1

怎么样？

select{
  border: 1px solid #111;
  background: #fff;
  width: auto;
  padding: 5px;
  font-size: 13px;
  border: 1px solid #ccc;
  height: 30px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0px;
}

Answer 2

在css中将宽度设置为auto。

width:auto;

Answer 3

只需从你的css中移除width属性，然后它会自动调整到它的最大长度，你不会需要调整它。

select{
  border: 1px solid #111;
  background: #fff;
  padding: 5px;
  font-size: 13px;
  border: 1px solid #ccc;
  height: 30px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0px;
}

fiddle此处

如何自动调整文本？

3 个答案: