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

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。