<span>内部<form>标签</form> </span>

Question

我正在尝试将<span>标记放在<form>标记内，如下所示：

HTML：

<form action="myAction" method="post">
    <!-- hidden input forms here -->

    <span class="leftBrace">[</span>
        <input type="submit" value="Evaluate" class="evaluate" />
    <span class="rightBrace">]</span>
</form>

CSS：

input[type="submit"].evaluate {
    background: none;
    border: none;
    color: #0000ff;
    cursor: pointer;
    padding: 0;
}
input[type="submit"].evaluate:hover {
    text-decoration: underline;
}
.leftBrace {
    float: left;
    color: #0000ff;
}
.rightBrace {
    float: right;
    color: #0000ff;
}

输出：

如何制作它看起来像：

[ Evaluate ]

我特别喜欢大括号超出submit链接（因此我没有将其设为value="[ Evaluate ]"），因为我不希望在悬停时用大括号括起来。

---

更新

我从float和.leftBrace移除了.rightBrace，并将float: left添加到input[type=submit]。

input[type="submit"].evaluate {
    background: none;
    border: none;
    color: #0000ff;
    cursor: pointer;
    padding: 0;
    float: left;
}
input[type="submit"].evaluate:hover {
    text-decoration: underline;
}
.leftBrace {
    color: #0000ff;
}
.rightBrace {
    color: #0000ff;
}

Answer 1

支撑不需要

浮动并将其移除。

.leftBrace {

    color: #0000ff;
}
.rightBrace {

    color: #0000ff;
}

Answer 2

span默认为display: inline;且input type="submit"为display: inline-block;，因此在这种情况下float是不必要的。从float和.leftBrace移除.rightBrace，内容应显示在一行中。

input[type="submit"].evaluate {
    background: none;
    border: none;
    color: #0000ff;
    cursor: pointer;
    padding: 0;
}
input[type="submit"].evaluate:hover {
    text-decoration: underline;
}
.leftBrace {
    color: #0000ff;
}
.rightBrace {
    color: #0000ff;
}

<form action="myAction" method="post">
    <!-- hidden input forms here -->

    <span class="leftBrace">[</span>
        <input type="submit" value="Evaluate" class="evaluate" />
    <span class="rightBrace">]</span>
</form>

JS小提琴： https://jsfiddle.net/qh7u0cda/

Answer 3

尝试不用浮动：

<form action="myAction" method="post">
<!-- hidden input forms here -->

<span class="leftBrace">[</span><input type="submit" value="Evaluate" class="course" /><span class="rightBrace">]</span>