Question

我知道这对你们中的一些人来说是非常基本的，但我不知道有足够的css来实现这一目标。

我正在尝试创建自己的微调器版本，并且它将挂钩到jqueryui主题，因此必须至少最初使用它们的类。我还需要让小部件能够动态地改变它的高度（和宽度）。

我的问题是我不知道如何调整按钮的大小以适应容器的高度。如果我主动设置.ui-spinner div的高度，则容器太小而无法容纳文本。如果我没有，那么div更大，所以锚也需要，但我不知道有多大。使用开发人员工具查看它，我没有看到任何边距或填充来计算额外的大小。

我看到How to style an anchor tag to look like a button with the same height as the button?一直在弹出类似的问题，但我已经将样式设置为内嵌块。

这是我现在拥有的。我在http://jsfiddle.net/37za8/

做了一个小提琴

HTML

<div class="ui-corner-all ui-widget ui-widget-content ui-spinner">
    <a class="ui-corner-all ui-widget ui-button ui-button-text-only ui-state-default" tabindex="-1" style="vertical-align: middle; margin: 0; display: inline-block;">
    <span class="ui-icon ui-icon-minusthick"></span>
</a>

    <input class="ui-spinner-input" style="margin: 0;" value="0" />

    <a class="ui-corner-all ui-widget ui-button ui-button-text-only ui-state-default" tabindex="-1" style="vertical-align: middle; margin: 0; display: inline-block;">
        <span class="ui-icon ui-icon-plusthick"></span>
    </a>
</div>

的jQuery

var _selector = ".ui-spinner"

$(_selector + " .ui-spinner-input").css("height", "18px");
$(_selector + " a").css("height", "18px");

$(_selector + " .ui-spinner-input").css("width", "52px");
$(_selector + " a").css("width", "24px");
$(_selector + " span").css("margin-left", "4px");

只要结果是动态大小的，我就可以改变你们所说的任何有用的东西。我相信对大多数人来说这很容易。提前谢谢！

修改

为了澄清，我试图最终模仿jqueryui微调器。我正在尝试制作一个小部件/组件，可以在显示之前设置高度。 jqueryui处理它的一个简单例子是this fiddle。我构建的组件有一个setHeight函数，它将设置小部件的高度。它只是在jQuery中设置高度的那两行。必须有一些方法来设置css（或在必要时添加更多jquery），以便我可以动态地改变高度。

Answer 1

您可以计算容器的高度并将其插入＆＃34; a＆＃34;的高度。元素：

var _selector = ".ui-spinner"

var _inputvar = 25;

$(_selector).css("height", _inputvar);
$(_selector).css("line-height", "1");

console.log($(_selector).height());

$(_selector + " a").css("height", $(_selector).height());

$(_selector + " .ui-spinner-input").css("width", "52px");
$(_selector + " a").css("width", _inputvar);
$(_selector + " span").css({display:"inline-block",position:"static",marginTop:(_inputvar/10)+"px"});

http://jsfiddle.net/37za8/13/

注意我删除了输入高度，取决于您可能需要将其放回的设置字体。保证金最高值可以根据预期的价值范围进行优化，我认为在这种情况下除以10个工作直到某一点

通过CSS你可以做到这一点（但这实际上取决于你打算如何动态）

.ui-spinner {
    height: 25px;
}
.ui-spinner .ui-icon {
    left:4px;
}
.ui-spinner  .ui-state-default {
    padding: 12px;
}
ui-spinner-input {
    width: 50px;
}

http://jsfiddle.net/37za8/9/

Answer 2

如果你混合使用css和jquery，你应该能够达到你想要的效果：

<强> CSS

.ui-spinner,
.ui-spinner > a,
.ui-spinner-input {box-sizing:border-box;}
.ui-spinner > a {width:24px; text-align:center;}
.ui-spinner span.ui-icon {left:50%; margin-left:-8px;}
.ui-spinner-input {width:52px;}

<强> jquery的

var spinner = $(".ui-spinner"),
    children = spinner.children();

 spinner.height(48); //added for test purposes (if you change the height it should change the inner object heights)

children.height(spinner.height() - 2);  //minus 2 is because the box-sizing hasn't taken into account the borders for some reason

Example

如何使锚填充其包含div的高度

HTML

的jQuery

修改

2 个答案: