2016-03-30 14 views
1

struts2を使用して同じ行にユーザーIDとパスワードを表示するWebページを設計したいとします。 "theme = 'simple'"を使わずに管理する方法。theme = "simple"を使わずにStruts2を使って同じ行に複数のテキストフィールドを配置する方法は?

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

上記の

ソースコード:デフォルトStruts2のことで

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

答えて

1

は、テーブルレイアウトでの入力フィールドをラップxhtmlテーマを、使用しています。テーブルレイアウトでは、行と列を使用して要素の一意の位置付けが使用されます。同じ行に2つの行を表示することはできません。一方

は、HTMLのStrutsタグのために使用して、

標準的な2列のCSSベースのレイアウトを使用しているテーマcss_xhtml(フォーム、テキストフィールド、選択、など)

があります

インラインで表示する要素のスタイルを変更することができます。 div sはtextfilds彼らのために生成されている場合は、それは、ブラウザの幅を埋め、ブラウザが あるとき(うまくラップボックスのグリッドを作成するのに長い時間のために可能であったdysplay: inline-block

The inline-block Value

スタイルを使用することができますサイズが変更された)、 floatプロパティを使用します。

ただし、displayプロパティの値がinline-blockの場合は、 の方がさらに簡単になります。

インラインブロック要素はインライン要素と似ていますが、幅と高さは です。

コード:

<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

あなたの生成されたHTMLによると、あなたはあなたのテーブルの<tr>にCSSルールdisplay:inline-block;を適用することができます。

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>

言っ

は、私はあなたがすることなく、単一の要素

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

上または単一のフォーム

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

simpleテーマを使用することができるという事実を認識していない可能性があります感覚を持っていますアプリケーション全体にテーマXHTMLの使用を中止しました。

関連する問題