如何调整下拉菜单的大小？

Question

所以我有一个这样的下拉菜单：

<select class="ui search dropdown">
    <option value="">Caption</option>
    <option value="someoption">SomeOption</option>
</select>

添加 width="20" 和 style="width: 20px" 都没有设置我想要的宽度。我观察到，在浏览器中，实际上显示了不同的代码； select 被转换为 div，因此该转换似乎没有继承更改后的宽度。

如何为这样的菜单设置不同的宽度？

Answer 1

如果添加的 <div> 具有 class 或 ID，请使用 CSS 对其进行定位。

<style>
#id{
  /*styles*/
 }
.class{
  /*styles*/
}
.parentClass>div{
  /*styles*/
}
#selectWrapper>div{
  /*styles*/
}
</style>

Answer 2

尝试用标识符包裹 select 并从那里定位 select。

.wrapper select {
  width: 50px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.css">


<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.js"></script>


<div class='wrapper'>
  <select class="ui search dropdown">
      <option value="">Caption</option>
      <option value="someoption">SomeOption</option>
  </select>
</div>

Answer 3

试试这个：

<select id="drpdwn" class="ui search dropdown"> <option value="">Caption</option> <option value="someoption">SomeOption</option> </select>

#drpdwn{ width: 20px;}

id 的优先级高于 class。这个有效

Answer 4

这是 Indrek Siitan 在 Gitter Chat:

中提出的解决方案

在其周围放置一个具有特定宽度的 div，然后将 fluid class 附加到下拉列表中。即：

<div style="width: 20px">
    <select class="ui fluid search dropdown">
        <option value="">Caption</option>
        <option value="someoption">SomeOption</option>
    </select>
<div>

如何调整下拉菜单的大小？

How does one resize a dropdown menu?

html

css

semantic-ui