设置命令按钮的宽度

Question

我正在尝试使一个联系人表单看起来像;

+----------------+-------------------+
| Name:          |                   |
+----------------+-------------------+
| Email Address: |                   |
+----------------+-------------------+
| Website:       |                   |
+----------------+-------------------+
| Comment:       |                   |
+----------------+-------------------+
|               Send                 |
+------------------------------------+

到目前为止，我把我的标签和文本放在网格中。我的按钮是这样的;

...
+----------------+-------------------+
| Comment:       |                   |
+----------------+-------------------+
| Send |
+------+

但我希望它看起来像第一个，居中并与其他组件的宽度对齐。

<p:panelGrid columns="2">
  <h:outputLabel value="Name:" />
  <p:inputText value="#{contactFormController.name}" required="true" />
  <h:outputLabel value="Email Address:" />
  <p:inputText value="#{contactFormController.email}" required="true" />
  <h:outputLabel value="Website:" />
  <p:inputText value="#{contactFormController.website}" required="false" />
  <h:outputText value="Comment:" />
  <p:inputText value="#{contactFormController.comment}" required="true" />
  <p:commandButton value="Send" actionListener="#{contactFormController.sentMail}"/>
</p:panelGrid>

Answer 1

试试这样写:

<p:panelGrid>
    <p:row>
        <p:column>
            <h:outputLabel value="Name:" />
        </p:column>
        <p:column>
            <p:inputText value="#{contactFormController.name}" required="true" />
        </p:column>
    </p:row>
//other columns here
    <p:row colspan="2" >
        <p:commandButton value="Send" actionListener="#{contactFormController.sentMail}"/>
    <p:row>
</p:panelGrid>

Answer 2

这是一个使用flex方法的选项!

首先，像这样布局你的html:

<!-- contact-form.html -->
<div class="contact-form">
  <div class="cf-input">
    <label for="cf-name">Name:</label>
    <input id="cf-name" type="text">
  </div>
  <div class="cf-input">
    <label for="cf-email">Email Address:</label>
    <input id="cf-email" type="text">
  </div>
  <div class="cf-input">
    <label for="cf-website">Website:</label>
    <input id="cf-website" type="text">
  </div>
  <div class="cf-input">
    <label for="cf-comment">Comment:</label>
    <input id="cf-comment" type="text">
  </div>
  <button>Send</button>
</div>

然后你可以这样布局你的css:

/** contact-form.css **/
.contact-form {
  display: flex;
  flex-flow: column nowrap;
  width: 300px; /* Set size of contact form */
}
.contact-form > .cf-input {
  display: flex;
  margin: 5px 0; /* Optional: Adds space between each input */
}
.contact-form > .cf-input > label {
  min-width: 125px; /* Width of labels */
}
.contact-form > .cf-input > input {
  flex: 1 0 auto; /* Expands input fields to fill remaining space */
}
.contact-form > button {
  width: 100px; /* Set to whatever. This is the width of the button */
  align-self: center;
}

查看此处提琴:https://jsfiddle.net/chengsieuly/mfxbu7fj/7/