如何使用 Struts 2 将多个文本字段放置在同一行而不使用 theme="simple"？

问题描述 投票：0回答：2

我想使用 Struts 2 设计一个在同一行显示用户 

id
和 
password
的网页。

不使用

theme='simple'
如何管理？

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

上述源码：

<!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>
html css jsp struts2 themes
2个回答
2
投票

根据生成的 HTML，您可以将 CSS 规则 

display:inline-block;
应用于表格的 
<tr>
：

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>

也就是说，我感觉您可能没有意识到可以在单个元素上使用 

simple
主题 

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

不会放弃在整个应用程序中使用 

XHTML
主题。

2
投票

默认情况下，Struts2 使用 

xhtml
主题，它用表格布局包装输入字段。表格布局利用行和列对其元素进行独特的定位。您无法在同一行上显示两行。

另一方面，有一个主题

css_xhtml
正在使用

基于 CSS 的标准两列布局，用于 HTML Struts 标签（表单、文本字段、选择等）

您可以更改元素的样式以内联显示。如果为文本字段生成了 

div
，您可以使用样式 
dysplay: inline-block

内联块值

很长一段时间以来，创建一个盒子网格来填充浏览器宽度并很好地包裹（当浏览器打开时）是可能的。 调整大小），通过使用 
float
属性。

但是，

inline-block
属性的
display
值使得这个 甚至更容易。

内联块元素类似于内联元素，但它们可以有一个 宽度和高度。

代码：

<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.