隐藏输入按钮时的折叠跨度答案

【问题标题】：Collapse span when input button is hidden隐藏输入按钮时的折叠跨度
【发布时间】：2010-05-13 11:04:03
【问题描述】：

我有一个环绕输入按钮的样式，所以按钮的样式可以非常有创意。当按钮隐藏在 .Net 中时，我希望样式折叠起来，以便它也像隐藏一样呈现。由于按钮或隐藏按钮中没有任何值，样式的作用是保持较小的形状。

点击查看演示：http://media.apus.edu/it/evan-testing/button.htm

<style>
.button {
    cursor:pointer;
    text-decoration:none;
    background:url(button_bg.gif) no-repeat right top; 
    padding-right:10px;
    display:inline-block;
    line-height:29px;
    height:29px;
    font-size:12px;
    color:#FFFFFF;
    font-weight:bold;
}

span.button {
    vertical-align: middle;
}

.button span { 
    background:url(button_bg.gif) no-repeat left top;
    padding-left:10px;
    line-height:20px;
    height:29px;
    display:inline-block;
}

.button span span {
    background:transparent;
    padding:0;
    font-size:12px;
}

.button span input {
    cursor:pointer;
    font-weight:bold;
    background:transparent;
    border:0;
    padding-top:.4em;
    font-size:12px;
    font-family:verdana;
    color:#FFFFFF;
}

.button:hover {
    background-position:right -39px;
}

.button:hover span {
    background-position:left -39px;
}

.button:active {
  background-position:right -78px;
}

.button:active span {
  background-position:left -78px;
}
</style>

Input button wrapped in a span with no value: 
<span class="button"><span><input type="button" value=""></span></span>

<P>

Input button wrapped in a span with a value: 
<span class="button"><span><input type="button" value="test"></span></span>

<P>

Span with no data value: 
<span class="button"><span></span>

【问题讨论】：

标签： button input hide html

【解决方案1】：

不幸的是，没有办法根据元素的内容来设置元素的样式。

如何设置<button> 元素的样式：

<button><span><span>Test</span></span></button>

【讨论】：

我想我正在寻找的是当跨度之间没有数据并且只有当跨度内有数据将其拉伸到适当的大小时，才能使跨度的两侧收缩/折叠.正如在我的演示中看到的，第二个示例仍然显示了一种样式：media.apus.edu/it/evan-testing/button.htm

【解决方案2】：

这家伙有比我更好的解决方案。毕竟我不必使用“按钮”，我看到每个人都声称需要设置表单按钮的样式。我仍然可以使用 .net 所需的“输入”，当按钮被隐藏时，样式会相应地消失。

查看演示：http://fortysevenmedia.com/tuts/cssbuttons/

【讨论】：