css - 更改 的宽度

Question

我有一个 slectOnMenu 组件 我正在尝试通过在覆盖 .ui-selectonemenu, ui-selectonemenu 后的样式中设置 width:120% !important; 来更改 slectOnMenu 的宽度- 但我只是更改了标签，我怎样才能移动触发器呢？我想更改 selectOneMenu 的宽度，如下面的白色区域。

CSS

              <h:form id="rqScannerForm">
                 <style type="text/css">
                    .ui-selectonemenu{width: 120% !important;} 
                    .ui-selectonemenu-label{width: 120% !important;}
                 </style>
                  <p:selectOneMenu  style="width: 120% !important;}" scrollHeight="150" 
                  value="#{viewEventStatusController.eventStatusId}"  disabled="#{!eventStatusController.isEntityEditable}" autoWidth="false" >
                  <f:selectItems value="#{viewEventStatusController.eventStatusList}" var="eventStatus" itemValue="#{eventStatus.id}" itemLabel="#{eventStatus.objectId}" />
                  </p:selectOneMenu>
              </h:form>

截图

Answer 1

.ui-selectonemenu {
    min-width: 50% !important;
}

请注意，将宽度设为大于 100% 会弄乱您的布局。我从来没有用过大于 100% 的!。如果你的意思是像素使用

.ui-selectonemenu {
    min-width: 120px !important;
}

为了提高响应速度-保存使用 em 而不是 px:

.ui-selectonemenu {
    min-width: 8em !important;
}