<span>里面<form>标签

我试图把<span>标签内<form>标签是这样的：<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; 
}

输出：

enter image description here

如何使它所以会出现这样的：

[ Evaluate ]

我特别喜欢括号是submit外环线（因此我没能value="[ Evaluate ]"）因为我不想让大括号在悬停时加下划线。

UPDATE：

我从.leftBrace和.rightBrace除去float并加入到float: leftinput[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; 
}

enter image description here

来源

2015-04-02 silver

删除''从和.leftBrace''.rightBrace' float'。 'span'默认是'inline'，所以'float'是不必要的。 https://jsfiddle.net/qh7u0cda/ – 2015-04-02 07:30:35

将'float：left'添加到'input [type =“submit”]。当然' – Eranda 2015-04-02 07:41:01

嗨，它没有正常工作。查看上面的更新以了解更改 – silver 2015-04-02 08:00:10

span是display: inline;默认和input type="submit"并display: inline-block;所以float S IN这种情况下是不必要的。从.leftBrace和.rightBrace删除float，内容应显示在一行中。

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/

来源

2015-04-06 09:50:58

浮子不需要支架并将其取出。

.leftBrace { 

    color: #0000ff; 
} 
.rightBrace { 

    color: #0000ff; 
}

来源

2015-04-02 07:33:57

@ohtph - 这个答案说停止浮动跨度。它没有说让输入浮动。不要让输入浮动，因为它打破了它。 – Quentin 2015-04-02 08:06:06

我也赞成这个。这是我的预制模板弄乱了CSS。 – silver 2015-04-07 03:26:01

-2

尝试没有浮动：

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

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

来源

2015-04-02 08:02:54 laul

无论你的html代码是否内联，css都不在乎。 – Eranda 2015-04-02 08:24:16

是的，HTML不是所见即所得。 – silver 2015-04-02 08:42:32

<span>里面<form>标签

回答

相关问题