Question

我已将<input type="submit">修改为超链接。

CSS：

input[type="submit"].searchitem {
    background: none;
    border: none;
    color: blue;
    cursor: pointer;
    padding: 0px;
}

input[type="submit"].searchitem:hover {
    text-decoration: underline;
}

JSTL：

<c:forEach var="searchItem" items="${searchResults}">
    <form action="view-schedule.jsp" method="post">
        <input type="hidden" name="movieid" value="${searchItem.movieId}" />
        <input type="submit" value="${searchItem.movieTitle}" class="searchitem" />
    </form>
</c:forEach>

Firefox Inspector：

<form method="post" action="view-schedule.jsp">

    <input type="hidden" value="4" name="movieid"></input>
    <input class="searchitem" type="submit" value="INSURGENT"></input>

</form>
<form method="post" action="view-schedule.jsp">

    <input type="hidden" value="2" name="movieid"></input>
    <input class="searchitem" type="submit" value="INTERSTELLAR"></input>

</form>
<form method="post" action="view-schedule.jsp">

    <input type="hidden" value="9" name="movieid"></input>
    <input class="searchitem" type="submit" value="MINIONS"></input>

</form>
<form method="post" action="view-schedule.jsp">

    <input type="hidden" value="6" name="movieid"></input>
    <input class="searchitem" type="submit" value="MOCKINGJAY: PART I"></input>

</form>
<form method="post" action="view-schedule.jsp">

    <input type="hidden" value="3" name="movieid"></input>
    <input class="searchitem" type="submit" value="PENGUINS OF MADAGASCAR"></input>

</form>
<form method="post" action="view-schedule.jsp">

    <input type="hidden" value="8" name="movieid"></input>
    <input class="searchitem" type="submit" value="WHITE BIRD IN A BLIZZARD"></input>

</form>

输出：

enter image description here

但它在搜索结果之间显示空格。我不认为我在任何地方都有<br />。

（对于每个，它都适用于scriptlet，但我正在尝试转换为JSTL）。

Answer 1

只需将此添加到您的CSS

即可

 form {
    margin-bottom: 0;
 }

Answer 2

由于没有适用于form的格式，因此用户代理样式表中有margin-bottom 像

form {
    margin-bottom: 1em;
}

用以下内容替换它以获得良好的外观

form {
    margin-bottom: 5px;
}

试试这个

<html>
    <head>
    <title>Test Line Break</title>
    <style>
        form{
            margin-bottom:5px;
        }
        input[type="submit"].searchitem {
            background: none;
            border: none;
            color: blue;
            cursor: pointer;
            padding: 0px;
        }

        input[type="submit"].searchitem:hover {
            text-decoration: underline;
        }
    </style>
    </head>
    <body>
        <form method="post" action="view-schedule.jsp">

            <input type="hidden" value="2" name="movieid"></input>
            <input class="searchitem" type="submit" value="INTERSTELLAR"></input>

        </form>
        <form method="post" action="view-schedule.jsp">

            <input type="hidden" value="2" name="movieid"></input>
            <input class="searchitem" type="submit" value="INTERSTELLAR"></input>

        </form>
    </body>
</html>

这就是为什么你在按钮上休息的原因。

删除JSTL <c：foreach> </c：foreach>中的换行符

2 个答案: