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>有类或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

这是Indrek Siitan从Gitter Chat：

提出的解决方案

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

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

Answer 4

试试这个：

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

#drpdwn{ width: 20px;}

id的优先级高于class。这个工作

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

4 个答案: