Question

我有以下代码，我试图让两个按钮重置表单并保存在彼此旁边。当用户登陆页面时，我想要隐藏保存按钮。当他浏览表格时，应出现此按钮。隐藏“保存”按钮时，我希望“保存”按钮仍然占用其空间，因此当“保存”按钮出现在表单末尾时，按钮不会移动。如何将“隐藏”按钮隐藏起来，并在隐藏在“重置表单”按钮旁边的同一行中时占用空间？

<div class="commandButtons">       
    <span class="commandButtonsRight">
        <button class="k-button k-button-icontext"  hidden ="true" data-bind="click: save">
            <span class="k-icon k-update"></span>Save
        </button>
        <button class="k-button k-button-icontext" data-bind="click: cancel">
            <span class="k-icon k-cancel"></span>Reset Form
        </button>
    </span>

Answer 1

＆＃13;

.save {
  visibility:hidden;
  }

＆＃13;

<div class="commandButtons">       
    <span class="commandButtonsRight">
        <button class="k-button k-button-icontext save" data-bind="click: save">
            <span class="k-icon k-update"></span>Save
        </button>
        <button class="k-button k-button-icontext" data-bind="click: cancel">
            <span class="k-icon k-cancel"></span>Reset Form
        </button>
    </span>
</div>

＆＃13;

Answer 2

只需将opacity设置为0

即可

查看此fiddle。

以下是摘录。

#hide {
  opacity: 0;
}

<span class="commandButtonsRight">
        <button id="hide" class="k-button k-button-icontext" data-bind="click: save">
            <span class="k-icon k-update"></span>Save
</button>
<button class="k-button k-button-icontext" data-bind="click: cancel">
  <span class="k-icon k-cancel"></span>Reset Form
</button>
</span>

Answer 3

您可以将其可见性设置为隐藏：

.commandButtons {
     visibility: hidden;
}

如果它仍然可以点击，那么你可以将其不透明度设置为零：

.commandButtons {
     opacity: 0;
}

Answer 4

维持div空间：

CSS

.class {
   visibility:hidden;
}

不维持div空间：

CSS

.class {
   display:none;
}

如何隐藏按钮并让它占据其隐藏的空间？

4 个答案: