Ionic2 如何在IONIC 2中设置100%宽度的离子选择组件

我想将我的离子选择设置为100%宽度

我曾经尝试过这样的css类：

.mySelect { width: 100% !important; }

.full-width-select {
  width: 100%;
  max-width: 100%;
}

但它不起作用。

是我做的

对于想要解决方案的人，以下是代码：

.myCustomSelect{
  max-width: 100% !important;
}

---

您必须重写“max width”css属性。

增加选择器的特殊性可以在不使用！重要信息：

ion-select.myCustomSelect{
  width: 100%;
  max-width: 100%;
}

这让它更干净了，因为！重要信息应尽可能少用，如此处的堆栈溢出文章所述：

---

如果你把路易斯·安东尼奥·佩斯塔纳的答案与他最初问题的代码联系起来，那么答案是好的。因此，更清楚地说，让ion select 100%使用其容器的完整代码是：

.your_ion_select {
    max-width: 100% !important;
    width: 100% !important;
}

---

你不需要！重要的是！爱奥尼亚规定最小宽度为45%（或根据您的爱奥尼亚版本而定）。你所要做的就是以100%的最大宽度超越它。同时，select作为一个内联元素，只会扩展以适应其内容。所以它不会填满整个宽度。因此，要实现这一点，只需向其添加

width:100%

。因此，最终的CSS类可能如下所示：

.mySelect { width: 100% !important; }

.full-width-select {
  width: 100%;
  max-width: 100%;
}

---

我尝试了每个解决方案，但找到了一个完美的方法：） 只需通过添加以下内容修改sass文件

ion-select{
    max-width: 70% !important;// your choice :)
}

---

这就是帮助我的原因。在阅读了多篇文章之后，我在这篇stack overflow文章中发现，如果您打开开发人员工具并使用inspect工具，您可以看到直接影响select选项的类

现在我们知道这些类是

.alert wrapper.ion overlay wrapper.sc-ion-alert-md

，我们可以在

global.scss

文件中添加调整

像这样

:root{
   .alert-wrapper.ion-overlay-wrapper.sc-ion-alert-md{
      max-width: 100% !important;
      width: 100% !important;
}

---

我目前正在使用Ionicv4及更高版本，但我认为这仍然有帮助

，因为我认为您不需要该

！重要信息

，因为类选择器的优先级高于元素选择器。我同意您的意见，但在这种情况下，我不会重写

max width

属性，对吗？类选择器比元素选择器具有更高的特异性，因此它将被重写。另外，最好指定

max width:none

，您可以这样做：

width:110%

，在这种情况下，我认为这不是真正必要的，但更干净。有人能帮我吗？我想你需要把它取下来。ion select是一个元素名，而不是一个styleion-select.full-width{width:100%；max width:100%；}我想我记得以前见过ion select是一个类，也是一个标记，但当我现在看到它时，它似乎只是一个标记，正如你所建议的。谢谢@dannrob，我已经更正了。这应该是答案