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

Question

我有一系列<div>个，每个都有按钮。

  <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>

并非每个按钮都需要始终处于活动状态。例如，有时候我将展示的应用程序没有实时网站。我无法删除实时网站按钮，因为我的div将小于其周围的div：

我的想法是要么将按钮留在那里并在其中画一条黑线，要么将按钮变灰以表示它无法点击。如何在不弄乱布局的情况下指示此按钮处于非活动状态？

Answer 1

为什么不将HTML语义状态disabled与视觉样式line-through结合起来，例如：

＆＃13;

＆＃13;

button:disabled {
  text-decoration: line-through;
}

＆＃13;

<button disabled="true">DISABLED</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这两种方式：

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

在您网站的css文件中：

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

在某个场景的代码中 使用JavaScript禁用必要的按钮。

方法2：创建一个css类，您可以将其应用于各个按钮，使其显示为已禁用

在您网站的主要css文件中：

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

在某个场景的代码中 将“disabled-button”css类添加到必要的按钮，并使用JavaScript禁用按钮。