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

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具有显示属性的完整参考.