html - 表格后面的按钮会自动添加为一行。如何将它们分开？

Question

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

这是图片的外观:

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

代码片段如下: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;
}

按钮.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 */
}

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

Answer 1

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

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

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

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

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