javascript - 为什么行内块元素即使在宽度为 100% 时也不会占据整个宽度？

Question

let lastSelectButton;

document.querySelectorAll('.primaryButton').forEach(button => {
  button.addEventListener('click', event => {
    if (lastSelectButton) document.querySelector(`#${lastSelectButton} + div`).classList.toggle('inlb');
    lastSelectButton = event.currentTarget.getAttribute('id');
    document.querySelector(`#${lastSelectButton} + div`).classList.toggle('inlb');
  }, false);
});

button {
  text-align: left;
}

.primaryButton {
  display: inline-block;
  background: #bfbfbf;
  border: none;
  width: 100%;
  padding: 5px;
}

.secondaryButton {
  background: #d4d4d4;
  border: none;
  width: 100%;
  text-indent: 1em;
}

.primaryButton:hover {
  background: #a1a1a1;
  cursor: pointer;
}

.secondaryButton:hover {
  background: #bfbfbf;
  cursor: pointer;
}

.none {
  display: none;
}

.inlb {
  display: inline-block !important;
}

<button class="primaryButton" id="p1">A</button>
<div class="none">
  <button class="secondaryButton">1</button>
  <button class="secondaryButton">2</button>
  <button class="secondaryButton">3</button>
</div>
<button class="primaryButton" id="p2">B</button>
<div class="none">
  <button class="secondaryButton">1</button>
  <button class="secondaryButton">2</button>
</div>
<button class="primaryButton" id="p3">C</button>
<div class="none">
  <button class="secondaryButton">1</button>
  <button class="secondaryButton">2</button>
</div>

如图所示，辅助按钮不像主按钮那样占据全宽。为什么会这样？如何纠正它？

相反，将inline-blocks 设置为blocks 可以解决问题：

let lastSelectButton;

document.querySelectorAll('.primaryButton').forEach(button => {
  button.addEventListener('click', event => {
    if (lastSelectButton) document.querySelector(`#${lastSelectButton} + div`).classList.toggle('inlb');
    lastSelectButton = event.currentTarget.getAttribute('id');
    document.querySelector(`#${lastSelectButton} + div`).classList.toggle('inlb');
  }, false);
});

button {
  text-align: left;
}

.primaryButton {
  display: block;
  background: #bfbfbf;
  border: none;
  width: 100%;
  padding: 5px;
}

.secondaryButton {
  background: #d4d4d4;
  border: none;
  width: 100%;
  text-indent: 1em;
}

.primaryButton:hover {
  background: #a1a1a1;
  cursor: pointer;
}

.secondaryButton:hover {
  background: #bfbfbf;
  cursor: pointer;
}

.none {
  display: none;
}

.inlb {
  display: block !important;
}

<button class="primaryButton" id="p1">A</button>
<div class="none">
  <button class="secondaryButton">1</button>
  <button class="secondaryButton">2</button>
  <button class="secondaryButton">3</button>
</div>
<button class="primaryButton" id="p2">B</button>
<div class="none">
  <button class="secondaryButton">1</button>
  <button class="secondaryButton">2</button>
</div>
<button class="primaryButton" id="p3">C</button>
<div class="none">
  <button class="secondaryButton">1</button>
  <button class="secondaryButton">2</button>
</div>

当我这样做可以解决问题时会发生什么？

编辑：这个问题不是这个display: inline-block问题的重复，我的问题的主要问题是按钮采用全宽，而另一个问题要求和之间的区别display: block。

标签： javascripthtmlcsswidth