如何在不使用主题=“简单"的情况下使用 Struts 2 在同一行中定位多个文本字段?

2022-01-16 00:00:00 html css java jsp struts2

我想使用 Struts 2 设计一个在同一行显示用户 ID 和密码的网页.

I want to design a webpage that display the user id and password in same line using Struts 2.

不使用theme='simple'如何管理?

How to manage it without using 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>

推荐答案

默认情况下 Struts2 使用 xhtml 主题，它用表格布局包装输入字段.表格布局利用其元素的独特定位，使用行和列.不能在同一行显示两行.

By default Struts2 is using xhtml theme, that wraps input fields with the table layout. A table layout utilizes unique positioning of its elements, using rows and columns. You can't display two rows on the same line.

另一方面，有一个主题 css_xhtml 正在使用

On the other hand there's a theme css_xhtml that is using

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

Standard two-column CSS-based layout, using for the HTML Struts Tags (form, textfield, select, etc)

您可以更改元素的样式以显示内联.如果为 textfilds 生成 divs，您可以使用样式 dysplay: inline-block

you can change the style of elements to display inline. If divs are generated for textfilds them you can use a style dysplay: inline-block

内联块值

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

然而，display 属性的 inline-block 值使得这个更容易.

However, the inline-block value of the display property makes this even easier.

inline-block 元素类似于 inline 元素，但它们可以有一个宽度和高度.

inline-block elements are like inline elements but they can have a width and a height.

代码:

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

相关文章