Question

正如您在下图所示，下拉div是一个比它应该更宽的像素。最奇怪的是，在悬停它只会改变它的颜色（SCSS小提琴的第22行）而且它不再宽了！ 显然，它的宽度等于它的父级，但正如你所看到的，它不是。也许它与按钮悬停以某种方式挂钩？

有人能解释一下这种情况吗？

代码是这样的。 https://jsfiddle.net/can528p2/12/

<div class="home">
    <div class="submit">
      <button class="btn-search">
        Search Items
      </button>
      <div class="menu">
        <ul role="menu">
          <li>
            <button>
              Items1
            </button>
          </li>
          <li>
            <button>
              Items2
            </button>
          </li>
        </ul>     
      </div>  <!-- /.menu -->   
    </div> <!-- /.submit -->
</div> <!-- /.home -->

SCSS

.home {
  height: 200px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  button {
    height: 40px;
    line-height: 40px;
    width: 100%;
  }
  .submit { 
    width: 20%; 
    position: relative;
    .btn-search { 
      background: #ff530d;
      color: #fff;
      outline: none;
      border: none;
      &:hover,
      &:focus,
      &:active {
        background-color: #f26202;
        outline: none;
      }
    } //.btn-search
    .menu {
      position: absolute;
      width: 100%;
      border-radius: 0;
      ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        background-color: transparent;
        button {
          background: #fff;
          border: none;
          outline: none;
          &:hover,
          &:focus,
          &:active {
            background: #ff530d;
            border: none;
            outline: none;
          }
        }
      } 
    } //.menu
  } //.submit
}

Answer 1

这是一种视错觉。它会欺骗你的大脑，因为显示器上像素的分界线是黑暗的，你的大脑与黑暗的背景形成对比。尝试将整个背景颜色更改为较浅的阴影，效果会减弱：

.home {
  height: 200px;
  padding: 20px;
  background-color: rgba(250, 250, 250, 0.7); <--
  button {
    height: 40px;
    line-height: 40px;
    width: 100%;
  }

https://jsfiddle.net/can528p2/13/

Div /按钮比它应该宽1个像素

1 个答案: