响应时在列中排列锚按钮，但内联显示属性已应用于全尺寸屏幕

Question

单击活动按钮时，它会被停用按钮取代，反之亦然，这在尺寸大于 768px 时一切正常，但当屏幕尺寸小于 768px 时，活动按钮不会被停用按钮取代，而是在小屏幕上切换时，两个按钮出现在不同的位置 我认为当屏幕 <=768px 时应该显示更改属性它调整它的方式是在切换按钮时在完全相同的位置相互替换它正在大屏幕上工作。

我的代码：

document.querySelectorAll('.activeBtn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    this.closest('tr').classList.remove('active');
  });
});

document.querySelectorAll('.deactiveBtn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    this.closest('tr').classList.add('active');
  });
});

tr a.activeBtn {
  display: none;
}

tr a.deactiveBtn {
  display: inline;
}

tr.active a.activeBtn {
  display: inline;
}

tr.active a.deactiveBtn {
  display: none;
}

<div class="detailsCategory">
  <div class="recentCategory">
    <div class="card-header">
      <h2>Categories </h2>
      <a href="#" class="catBtn">Add Categories</a>
    </div>
    <table>
      <thead>
        <tr>
          <td class="serial">#</td>
          <td>ID</td>
          <td>Categories</td>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td class="serial">1</td>
          <td>4202211</td>
          <td>Men</td>
          <td class="statusButtons">
            <span><a href="#" class='status activeBtn' >Active</a></span>&nbsp;
            <span><a href="#" class='status deactiveBtn'>Deactive</a></span>&nbsp;
            <span><a href="#" class='status editBtn'>Edit</a></span>&nbsp;
            <span><a href="#" class='status deleteBtn'>Delete</a></span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

每个跨度后都有受保护的空格  ，因此该行不是空的，因此不会被隐藏。为防止出现此问题，您必须忽略这些。您可以改为定义跨度的边距：

.statusButtons span {
  margin-right: 3px;
}

工作示例：

document.querySelectorAll('.activeBtn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    this.closest('tr').classList.remove('active');
  });
});

document.querySelectorAll('.deactiveBtn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault();
    this.closest('tr').classList.add('active');
  });
});

tr a.activeBtn {
  display: none;
}

tr a.deactiveBtn {
  display: inline;
}

tr.active a.activeBtn {
  display: inline;
}

tr.active a.deactiveBtn {
  display: none;
}

.statusButtons span {
  margin-right: 3px;
}

<div class="detailsCategory">
  <div class="recentCategory">
    <div class="card-header">
      <h2>Categories </h2>
      <a href="#" class="catBtn">Add Categories</a>
    </div>
    <table>
      <thead>
        <tr>
          <td class="serial">#</td>
          <td>ID</td>
          <td>Categories</td>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td class="serial">1</td>
          <td>4202211</td>
          <td>Men</td>
          <td class="statusButtons">
            <span><a href="#" class='status activeBtn' >Active</a></span>
            <span><a href="#" class='status deactiveBtn'>Deactive</a></span>
            <span><a href="#" class='status editBtn'>Edit</a></span>
            <span><a href="#" class='status deleteBtn'>Delete</a></span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

响应时在列中排列锚按钮，但内联显示属性已应用于全尺寸屏幕

Arrange achor buttons in coulmn when resposive but display inline property is already applied on full sized screen

css

css-position

display

响应时在列中排列锚按钮，但内联显示 属性 已应用于全尺寸屏幕

Arrange achor buttons in coulmn when resposive but display inline property is already applied on full sized screen

css

css-position

display

响应时在列中排列锚按钮，但内联显示属性已应用于全尺寸屏幕