table 之后的按钮自动添加为一行。如何将它们分开？

Question

我已经创建了一个关于学生数据库的 struts2 应用程序。问题是每当我在 table 中显示数据库后添加提交按钮时，该按钮被一个大背景包围，类似于它之前 table 的行宽。我想删除那个边框。

图片如下：

看，主页按钮周围是灰色背景，我不想要那个。

这是代码片段： JSP:

<table>
            <tr>
            <th>RollNo:</th>
            <th>Name:</th>
            <th>DOB:</th>
            <th>Gender:</th>
            <th>Address:</th>
            </tr>
            <%
            while(rs.next())
            {

            %>
                    <tr>
                    <td><%=rs.getInt(1) %></td>
                    <td><%=rs.getString(2) %></td>
                    <td><%=rs.getString(3) %></td>
                    <td><%=rs.getString(4) %></td>
                    <td><%=rs.getString(5) %></td>
                    </tr>
                   <%

                }
                %>
        </table>
        <%
        rs.close();
        stmt.close();
        conn.close();
    }
    catch(Exception e)
    {
        e.printStackTrace();
    }


    %>
    </div>
    <br><br>

    <s:form action="home.jsp">
        <s:submit class="button4" value="Home"></s:submit>
    </s:form>

table.css 文件:

table {
    background-color: #dbdbdb;
    width: 60%;
}

th,td {
    color: #363b3f;
    border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
    background-color: #c8c8c8
}

tr:hover {
    background-color: #c488d7;
}

button.css

.button4
{
    background-color: #af4ccf; /* purple */
    border: none;
    color: black;
    padding: 18px;
    font-family: 'Amputa';
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    border-radius: 30%;
    -webkit-transition-duration: 0.4s; /*Safari*/
    transition-duration: 0.4s;
    cursor: pointer;
}

.button4:hover
{
    background-color: #c986df; /* Light purple */
}

我尝试将 table 和按钮封装在单独的 div 中。我也试过，将按钮放在不同的 table 中。但没有任何效果。我似乎无法确定可能出错的确切位置。我如何以及如何做才能使背景边框消失并使按钮居中对齐？

Answer 1

s:form 生成了额外的 HTML 元素，由标记实现使用的 freemarker 模板解析。它根据标签使用的主题选择模板。

您已经为页面上的任何元素创建了 CSS，包括由 Struts 标签生成的元素，因此样式被继承。

对所有页面元素使用通用选择器并不总是符合页面元素的设计和外观。另一方面合格的选择者将其使用范围缩小到可以用容器或其他元素包装的特定内容。您还可以使用 id 限定选择器或使用 table 上的 class 属性并使用 class.

限定选择器

Struts 对 UI 标签生成的元素使用了一些主题。如果您想使用影响最小的 Struts 标签自定义设计您的页面，那么您应该使用 simple 主题。

<s:form action="home.jsp" theme="simple" cssStyle="background-color: none">
    <s:submit class="button4" value="Home"></s:submit>
</s:form>

table 之后的按钮自动添加为一行。如何将它们分开？

The button after a table is automatically added as a row. How to seperate them?

html

css

jsp

struts2

struts-tags