在不破坏布局的情况下停用HTML中的按钮

我有一系列的

，每一个都有按钮

  <div class="project-display">
      <h4>Project 1 (date)</h4>
      <button type="submit" class="project-button">Github</button>
      <button type="submit" class="project-button">Live Site</button>
      <button type="submit" class="project-button" id="desc" >Show Description</button>
  </div>

项目1（日期）
github
现场
显示描述

但并非每个按钮都需要一直处于活动状态。例如，有时我正在演示的应用程序将没有实时站点。我无法删除Live Site按钮，因为这样我的div将比周围的div小：

---

我的想法是要么把按钮留在那里，画一条黑线穿过它，要么把按钮涂成灰色，表示它不能被点击。如何指示此按钮处于非活动状态而不破坏布局？

为什么不将HTML语义状态

禁用

与视觉样式

行结合起来，例如：


按钮：禁用{
文字装饰：线条贯通；
}
禁用
您可以通过两种方式执行此操作：

方法1:为整个站点中所有禁用的按钮创建css样式

在站点的css文件中：

<style type="text/css">
   /* Style your disabled Buttons */
   button:disabled {
       background: white;
       border: 0;
       color: #666;
       cursor: pointer;
   }
</style>

<style type="text/css">
    /* Style your disabled Buttons */
    .disabled-button {
       background: white;
       border: 0;
       color: #666;
       cursor: pointer;
    }
</style>


/*设置禁用按钮的样式*/
按钮：禁用{
背景：白色；
边界：0；
颜色：#666；
光标：指针；
}

在特定场景的代码中：
使用JavaScript禁用必要的按钮

方法2:创建一个css类，可以应用于单个按钮，使其显示为禁用状态

在站点的主css文件中：

<style type="text/css">
   /* Style your disabled Buttons */
   button:disabled {
       background: white;
       border: 0;
       color: #666;
       cursor: pointer;
   }
</style>

<style type="text/css">
    /* Style your disabled Buttons */
    .disabled-button {
       background: white;
       border: 0;
       color: #666;
       cursor: pointer;
    }
</style>


/*设置禁用按钮的样式*/
.禁用按钮{
背景：白色；
边界：0；
颜色：#666；
光标：指针；
}

在特定场景的代码中：
将“disabled button”css类添加到必要的按钮中，并使用JavaScript禁用按钮。
？很好，这两个都可以。我会用它们做实验。谢谢大家！或者，您可以删除按钮并将div设置为固定高度HMMM破坏可用性以保留布局对我来说似乎不是最好的方案-您不能使用类似于
display:table cell
或固定高度值的方法来确保div的高度相同吗？