css - 如何使 anchor 填充其包含的 div 的高度

Question

我知道这对你们中的一些人来说真的很基础，但我对 CSS 的了解还不够多，无法做到这一点。

我正在尝试制作我自己的微调器版本，它将与 jqueryui 主题 Hook ，因此必须至少在最初使用它们的类。我还需要使小部件能够动态更改其高度(和宽度)。

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

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

这是我目前拥有的。我在 http://jsfiddle.net/37za8/ 为它做了一个 fiddle

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

如果您混合使用 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