css - 为什么我手动设置的宽度被设置为自动？

Question

我手动将 width 设置为 67px。如您所见，开发工具显示以下内容:

#tango-directive-template .tango .left-icons {
  width: 67px;
}

但是您也可以看到，实际的 width 只有 39.964px。它被设置为 auto 并由浏览器计算。

这是为什么？我应该如何防止这种情况发生？

---

app.scss

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

a {
  cursor: pointer;
}

tango.directive.scss

#tango-directive-template {
  .tango {
    margin-bottom: 20px;
    .left-icons {
      width: 67px;
      img, .author {
        position: relative;
        bottom: 15px;
        margin-right: 5px;
      }
      img {
        height: 20px;
      }
      .author {
        border: 1px solid gray;
        border-radius: 25px;
        padding: 10px;
      }
    }
    textarea {
      font-size: 18px;
      width: 700px;
      line-height: 135%;
      padding: 8px 16px;
      resize: none;
      border: 1px solid white;
      overflow: hidden;
    }
    textarea:focus {
      outline: none;
      border: 1px solid gray;
      overflow: auto; // only have scroll bar when focused
    }
    .menu {
      width: 750px;
      span {
        float: right;
        margin-left: 15px;
        cursor: pointer;
      }
    }
  }
  @for $i from 0 through 10 {
    .level-#{$i} {
      position: relative;
      left: #{$i*65}px;
    }
  }
}

Answer 1

span元素默认有 display: inline; .浏览器忽略内联元素上设置的任何宽度或高度；它们的行为就好像它们只是文本一样。

如果你想设置一个width在元素上，使用 display: block;或 display: inline-block; .

MDN 有一个 full reference for the display property .