遇到JSF问题

Question

我一直试图让我朋友的JSF看起来不错，但文本框只是不合作！我想让我的文本框排成一行。我能够使用CSS（table.panelGridA，B和C）控制三个单独的表，但文本框在一个浏览器中看起来很好，而在其他浏览器中看起来很糟糕。我认为最好定位特定的文本框，而不是三个表，我尝试用＃34; .ui-selectonemenu，＆＃34;但它没有做任何事。我还想在表单周围添加一些类型的框架（something similar to this）。非常感谢任何帮助！

<h:head>
<title>Registration</title>
<link href="style/Registrationcss.css" rel="stylesheet" type="text/css"/>
</h:head>
<h:body>
    <h:form >
        <h1>Registration</h1>

<p>Please Fill in all fields and click Registration</p>
        <h:panelGrid columns="2" style="vertical-align: middle;">
            <h:outputLabel value='First Name:'></h:outputLabel >
            <h:inputText id='fnameText' value='#{registrationBean.firstName}'
                         required="true" requiredMessage="First name is mandatory">
                <f:validateLength maximum="45"/>
            </h:inputText>
            <h:outputLabel value='Last Name:'></h:outputLabel>
            <h:inputText id='lastnameText' value='#{registrationBean.lastName}' 
                         required="true" requiredMessage="Last name is mandatory">
                <f:validateLength maximum="45"/>
            </h:inputText>
            <h:outputLabel value='Date of Birth (YYYY/MM/DD):'></h:outputLabel>
            <h:inputText id='dateofbirthText' value='#{registrationBean.dateofbirth}' 
                         required="true" requiredMessage="DOB is mandatory">
                <f:validateRegex pattern="((\(\d{3}\) ?)|(\d{4}/))?\d{2}/\d{2}" />
                <f:validateLength maximum="45"/>
            </h:inputText>
            <h:outputLabel value='Billing Address 1:'></h:outputLabel>
            <h:inputText id='address1Text' value='#{registrationBean.street1}' 
                         required="true" requiredMessage="Address1 is mandatory">
                <f:validateLength maximum="45"/>
            </h:inputText>
            <h:outputLabel value='Billing Address 2:'></h:outputLabel>
            <h:inputText id='address2Text' value='#{registrationBean.street2}' 
                         required="false" requiredMessage="Address2 is mandatory">
                <f:validateLength maximum="45"/>
            </h:inputText>
            <h:outputLabel value='Zip Code:'></h:outputLabel>
            <h:inputText id='zipcodeText' value='#{registrationBean.zipcode}' 
                         required="false" requiredMessage="Zip Code is mandatory">
                <f:validateLength maximum="10" minimum="5"/>
            </h:inputText>
            <h:outputLabel value='City:'></h:outputLabel>
            <h:inputText id='cityText' value='#{registrationBean.city}' 
                         required="true" requiredMessage="City is mandatory">
                <f:validateLength maximum="45"/>
            </h:inputText>
            <h:outputLabel value='State:'></h:outputLabel>
            <h:selectOneMenu id="stateList" value="#{registrationBean.state}">
            </h:selectOneMenu>

            <h:outputLabel value='Phone: (xxx-xxx-xxxx)'></h:outputLabel>
            <h:inputText id='phoneText' value='#{registrationBean.phone}' 
                         required="true" requiredMessage="Phone Number is mandatory" validatorMessage="Please enter a valid phone number!">
                <f:validateRegex pattern="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" />
            </h:inputText>


            <h:outputLabel value='Email:'></h:outputLabel>
            <h:inputText id='emailText' value='#{registrationBean.email}' 
                         required="true" requiredMessage="Email is mandatory" validatorMessage="Invalid email address!">
                <f:validateRegex pattern="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
            </h:inputText>


            <h:outputLabel value="Country"/>
            <h:selectOneMenu id="countryList" value="#{registrationBean.country}">

            </h:selectOneMenu>

            <h:outputLabel value='Credit Card #:'></h:outputLabel>
            <h:inputText id='ccnumText' value='#{registrationBean.ccnum}' 
                         required="true" requiredMessage="Credit Card # is mandatory">
                <f:validateLength maximum="16"/>
            </h:inputText>
            <h:outputLabel value="Credit Card Type:"/>
            <h:selectOneMenu id="cctypeList" value="#{registrationBean.cctype}">
            </h:selectOneMenu>
        </h:panelGrid>
        <h:panelGrid columns="3"  >
            <h:outputLabel  value='Expiration Date:'></h:outputLabel>
            <h:selectOneMenu id="expMM" value="#{registrationBean.expMM}">
            </h:selectOneMenu>
            <h:selectOneMenu id="expYYYY" value="#{registrationBean.expYYYY}">                  
            </h:selectOneMenu>
        </h:panelGrid>
        <h:panelGrid columns="2" style="vertical-align:middle;">
            <h:outputLabel value='CVV:'></h:outputLabel>
            <h:inputText id='CVVText' value='#{registrationBean.CVV}' 
                         required="true" requiredMessage="CVV is mandatory" >
                <f:validateLength maximum="4" minimum="3"/>
            </h:inputText>
            <h:outputLabel value='Credit Card Up-Limit:'></h:outputLabel>
            <h:inputText id='ccuplmtText' value='#{registrationBean.ccuplmt}' 
                         required="true" requiredMessage="CC Limit is mandatory">
            </h:inputText>
            <h:outputLabel value='Credit Card One-Time Limit:'></h:outputLabel>
            <h:inputText id='translmtText' value='#{registrationBean.tranlmt}' 
                         required="true" requiredMessage="One-Time Limit is mandatory">
            </h:inputText>


        </h:panelGrid>
        <br/>
        <br/>
        <h:commandButton value='Register' action="#{registrationBean.register()}"></h:commandButton>

        <h:outputLabel id="ConfirmationMessage" value="#{registrationBean.confirmationMessage}"/>
        <br/>
        <br /><a href="/WebRegistration/faces/RegistrationPage.xhtml">Registration Page</a>
        <br /><a href="/WebRegistration/faces/PaymentPage.xhtml">Payment Page</a>

    </h:form>
</h:body>

这是我的CSS页面：

body {
background-color: lightgray;
font-family:Verdana, sans-serif;
font-size:12px;
font-weight:bold;
color:#333333;}

h1 {
color: black;}

p {
color:black;}

input {
border-style:groove !important;}

table.panelGridA {
bottom: 0px; left: 0px; right: 0px; top: 0px; 
width: 427px;}

table.panelGridB{
bottom: 0px; left: 0px; right: 0px; top: 0px; 
width: 430px;}

table.panelGridC {
bottom: 0px; left: 0px; right: 0px; top: 0px; 
width: 441px !important;}

.ui-selectonemenu-label{
                width:100% !important;}

.ui-selectonemenu{bottom: 0px; left: 0px; right: 0px; top: 0px; 
width: 441px !important;}