我试图将Primefaces fileUpload控件设置为看起来像常规命令按钮。我已经在屏幕截图中看到了尽可能接近,但是我无法获得标有" Load"与其他按钮对齐。我用红色箭头标记了我的屏幕截图,显示按钮需要向上移动几个像素。
这是我的CSS和xhtml让我到了这一点。我尝试了各种偏差,但没有运气。
.ui-fileupload-buttonbar {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
border: none;
}
.ui-fileupload {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 0px 0px !important;
display: inline-block;
border: none;
}
.ui-fileupload-content {
display: none;
}
<p:toolbar>
<f:facet name="left">
<p:commandButton ajax="false" value="Save" icon="ui-icon-disk">
<p:fileDownload value="#{calculator.file}" />
</p:commandButton>
<p:fileUpload fileUploadListener="#{calculator.handleFileUpload}"
label="Load" mode="advanced" update="@all" auto="true"
sizeLimit="100000" allowTypes="/(\.|\/)(txt)$/" />
<p:commandButton ajax="false" value="MS Word"
icon="ui-icon-document" action="#{calculator.Poi()}" />
etc...
答案 0 :(得分:1)
答案更简单......
.ui-fileupload-buttonbar .ui-button {
top: -1px;
}
在许多情况下,上面的答案是相关的(这是......应该防止!重要,可以通过应用更具体的css选择器来完成)
答案 1 :(得分:0)
使您的css选择器比实际应用样式的那个更具体。例如。为按钮添加一个id属性并在选择器中使用它(与你已经拥有的类相结合使它成为more specific)