The inline-block Value

Question

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

如何在不使用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>

Answer 1

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

另一方面，正在使用

的主题css_xhtml

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

您可以更改要内联显示的元素样式。如果为textfild生成div，则可以使用样式dysplay: inline-block

The inline-block Value
  很长一段时间可以创建一个填充浏览器宽度并且包装得很好的盒子网格（当浏览器是   已调整大小），使用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>

Answer 2

根据您生成的HTML，您可以将CSS规则display:inline-block;应用到表格的<tr>：

＆＃13;

input{width:100px;} /* needed only to fit in the "Run code snippet" box */

.wwFormTable tr {
    display: inline-block;
}

＆＃13;

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

＆＃13;

那就是说，我感觉你可能没有意识到你可以在一个元素上使用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主题的使用。

如何在不使用theme =“simple”的情况下使用Struts2在同一行中放置多个文本字段？

2 个答案:

The inline-block Value