html - 里面的 标签

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

大括号不需要 float ，去掉它。

.leftBrace {

    color: #0000ff;
}
.rightBrace {

    color: #0000ff;
}