Question

好的，所以我在一个简单的高尔夫记分卡应用程序中使用jQuery Mobile。我使用此代码来获取表单末尾的总数。

<input id="total" type="text" name="total" value="" readonly="readonly" /> 
<p><input type="button" value="=" onclick="total.value=getTotalB(this.form)" />
<p><input type="reset" onClick="reset()" value="-"/>
</form>

我需要输入type =“button”并且重置大约为10px。我试过style =“width”。我不确定这些按钮大小最简单的方法是什么。有帮助吗？

Answer 1

在最简单的情况下，您可以尝试：

input {
    width: 10px;
}

或者添加更具体的类。

演示小提琴：http://jsfiddle.net/audetwebdesign/jV8FV/

Answer 2

给他们一个类似的类，然后使用CSS设置样式：

工作示例：

<html><head>

<style type='text/css'>
input.small {
    width:10px;  /* Apply to input tags with class "small" */
}

</style>

</head><body><form>

<input id="total" type="text" name="total" value="" readonly="readonly" />
<input class='small' type="button" value="=" onclick="total.value=getTotalB(this.form)" />
<input class='small' type="reset" onClick="reset()" value="-"/>

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

这样你可以同时更改两个按钮 - 它们看起来都一样（一致性是很好的做法）。

与他们一起玩得开心：

<style type='text/css'>
input.small {
    border:1px solid #ccc;
    cursor:pointer;
    padding:0;
    text-align:center;
    width:10px;
}

input.small:hover {
    background:dodgerblue;
}
</style>

顺便提一下，style="width"的问题在于您告诉按钮“使用width自行设置样式”。

按钮显示“多少width？不知道，我会按照正常方式进行操作。”

要解决这个问题，你需要告诉它有多宽：style="width:10px;"现在你已经有了满意的按钮。

Answer 3

此代码可能有效：

input[type="reset"]{
     width: 10px;
}

Answer 4

input[type=button],input[type=reset] {
 width:10px;
}

如果您不想调整代码中任何其他类型的按钮，则可以使用此选项。这只适用于类型按钮和类型重置...或者使用类。

设置jQuery按钮宽度输入类型=“按钮”

4 个答案: