css - 无法更改元素的宽度

Question

快速粗略的示例 here .只需打开 CDT 并选择 a- 标签即可。

.collapsible-header {
  font-weight: normal;
  color: rgba(0, 0, 0, 0.87);
  font-size: 13px;
  font-family: "Poppins", sans-serif;
  -webkit-box-direction: normal;
  direction: inherit;
  visibility: visible;
  list-style-type: none;
  box-sizing: inherit;
  display: flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  border: none;
  line-height: inherit;
  height: 48px;
  padding: 0px;
}

a {
  font-family: "Poppins", sans-serif;
  direction: inherit;
  visibility: visible;
  list-style-type: none;
  line-height: inherit;
  box-sizing: inherit;
  background-color: transparent;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  color: #757575;
  font-size: 1.0769rem;
  font-weight: 500;
  -webkit-box-flex: 1;
  flex: 1;
  height: 48px;
  padding-left: 16px;
  padding-right: 16px;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-align: center;
  align-items: center;
  width: 0px !important;
  transition: all 0.2s ease-out;
  display: block;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="collapsible-header" tabindex="0">
  <a class="waves-effect waves-blue">
    <i class="material-icons">folder_special</i>
    <span>Layouts</span>
    <i class="material-icons right opener" style="margin-right:0;">arrow_drop_down</i>
  </a>
</div>

---

我有一个 block 级元素 a 和 display:block。在 css 中，我将它的 width 设置为 0px 但它不会改变宽度。

在第一张图片中，您可以看到它已正确应用，但洋葱 View 仍然显示 260px，这实际上是 a 的当前宽度。

通常您可以在“洋葱 View ”中更改 x 值，但在这种情况下，更改会立即恢复为 260px。

a 元素有三个子元素，两个是 display:none，另一个宽度约为 60px，包括填充。

那么，这是为什么呢？

“洋葱 View ”

---

编辑:

由于使用 Chrome Devtools 时的 flex 设置，无法直接识别出未应用宽度设置。

这个在FF里面解决的比较好，看这里:

Answer 1

父元素有display: flex所以它会拉伸(stretch)您正在查看的元素。这是 flex 布局的固有行为。您可以通过指定 flex: 0 来阻止它子元素上的 CSS(本例中为 <a>)。