Einstellung commandButton's width

Question

Ich versuche, ein Kontaktformular zu machen, das aussieht;

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

Bisher habe ich meine Etiketten und Texte in Gitter gelegt. Meine Schaltfläche sieht so aus;

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

Aber ich möchte, dass es wie das erste aussieht, zentriert und mit anderen Komponenten Breite ausgerichtet.

<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

Versuchen Sie so etwas wie:

<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

Dies ist eine Option, die die Methode flex verwendet!

Zuerst Layout Ihrer html wie folgt aus:

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

Dann Sie Ihre css wie dieses Layout kann:

/** 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; 
} 

Schauen Sie sich die Geige hier: https://jsfiddle.net/chengsieuly/mfxbu7fj/7/