Question

我正在尝试制作一个看起来像的联系表格;

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

到目前为止，我将标签和文字放在网格中。我的按钮看起来像这样;

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

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

<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

这是使用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/

Answer 2

尝试类似：

<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>

设置commandButton的宽度

2 个答案: