2016-03-30 3 views
1

Ich möchte eine Webseite entwerfen, die die Benutzer-ID und das Passwort in derselben Zeile mit struts2 anzeigt. Wie man es ohne Verwendung von "theme = 'simple'" verwaltet.?Wie Sie mehrere Textfelder in derselben Zeile mit Struts2 positionieren, ohne theme = "simple" zu verwenden?

<%@taglib uri="/struts-tags" prefix="s" %> 
<%@page contentType="text/html" pageEncoding="UTF-8"%><html> 
<head>  

</head> 
<body> 
    <s:form action="Register.action"> 

     <s:textfield name="uid" label="User Name"/> 
     <s:password name="pass" label="Password"/> 
    </s:form> 
</div> 

Source Code der oben:

<!DOCTYPE html> 
<html> 
    <head>  
    </head> 
    <body> 
    <form id="Register" action="Register.action" method="post"> 
     <table class="wwFormTable"> 
      <tr> 
       <td class="tdLabel"> 
        <label for="Register_uid" class="label">User Name:</label> 
       </td> 
       <td> 
        <input type="text" name="uid" value="" id="Register_uid"/> 
       </td> 
      </tr> 
      <tr> 
       <td class="tdLabel"> 
        <label for="Register_pass" class="label">Password:</label> 
       </td> 
       <td> 
        <input type="password" name="pass" id="Register_pass"/> 
       </td> 
      </tr> 
     </table> 
    </form> 
    </body> 
</html> 

Antwort

1

standardmäßig Struts2 verwendet xhtml Thema, Wraps, Das Eingabefeld mit dem Tabellen-Layout. Ein Tabellenlayout verwendet eine eindeutige Positionierung seiner Elemente unter Verwendung von Zeilen und Spalten. Sie können nicht zwei Zeilen in derselben Zeile anzeigen.

Auf der anderen Seite gibt es ein Thema css_xhtml die

Standard-zweispaltigen CSS-basierten Layouts, indem für die HTML-Struts-Tags verwendet (Form, Textfeld, wählen usw.)

Sie können den Stil der Elemente ändern, die inline angezeigt werden sollen. Wenn div s für textfilds erzeugt werden, sie können Sie einen Stil verwenden dysplay: inline-block

The inline-block Value

Es hat sich für eine lange Zeit möglich, ein Gitter von Kisten zu erstellen, die die Browser-Breite füllt und wickelt schön (wenn der Browser ist geändert), indem die Eigenschaft float verwendet wird.

Allerdings macht der inline-block Wert der display Eigenschaft diese noch einfacher.

Inline-Blockelemente sind wie Inline-Elemente, aber sie können eine Breite und Höhe haben.

Der Code:

<style> 
.floating-box { 
    display: inline-block; 
} 
</style> 

<s:form action="Register.action" theme="css_xhtml"> 

    <s:textfield name="uid" label="User Name" cssClass="floating-box"/> 
    <s:password name="pass" label="Password" cssClass="floating-box"/> 

</s:form> 
1

nach Ihren generierten HTML, können Sie die CSS-Regel display:inline-block; zum <tr> Ihrer Tabelle anwenden:

input{width:100px;} /* needed only to fit in the "Run code snippet" box */ 
 

 
.wwFormTable tr { 
 
    display: inline-block; 
 
}
<table class="wwFormTable"> 
 
    <tr> 
 
    <td class="tdLabel"> 
 
     <label for="Register_uid" class="label">User Name:</label> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="uid" value="" id="Register_uid" /> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tdLabel"> 
 
     <label for="Register_pass" class="label">Password:</label> 
 
    </td> 
 
    <td> 
 
     <input type="password" name="pass" id="Register_pass" /> 
 
    </td> 
 
    </tr> 
 
</table>

Das heißt, ich habe das Gefühl, dass Sie nicht der Tatsache bewusst sein könnte, dass Sie das simple Thema auf einem einzigen Element

<s:form action="Register.action" theme="simple"> 
    <s:textfield name="uid" label="User Name" /> 
    <s:password name="pass" label="Password" /> 
</s:form> 

<s:form action="Register.action"> 
    <s:textfield name="uid" label="User Name" theme="simple" /> 
    <s:password name="pass" label="Password" theme="simple" /> 
</s:form> 

oder auf einem einzelnen Formular verwenden können, ohne die Verwendung des XHTML Themas auf die gesamte Anwendung fallen zu lassen.

Verwandte Themen