Question

我想将按钮分散到屏幕宽度的90％。

当我运行HTML时，按钮只占屏幕的10％左右。但是，如果我将宽度设置为带像素的数字，则会调整大小。

出了什么问题？

＆＃13;

.quiz {
  /*top: 240px;*/
  position: fixed;
  z-index: -1;
}

.quiz button {
  width: 90%;
  border-radius: 8px;
  display: block;
}

＆＃13;

<div class="quiz">
  <button>Option 1</button>
</div>

＆＃13;

Answer 1

在您的示例中，您将获取元素父级的宽度。您需要将按钮的父容器设置为屏幕的100％，然后将其他元素包围在测验内的单独容器中。

Answer 2

要设置百分比高度，其父元素必须具有明确的高度。

在您的情况下，最好的方法是将width: 100%添加到.quiz

Answer 3

当你给按钮增加90％的宽度时，它会将div.quiz的宽度视为最大值，并给出90％的宽度按钮。如果按钮必须是屏幕的90％，或者直接在体内定义它，或者将div.quiz宽度更改为100％，它应该在body体内或与体体具有相同宽度的其他元素。

.quiz {
    top: 240px;
    width: 100%;   ---assuming its parent has width that body has.
    position: fixed;
    z-index: -1;
}

.quiz button {
    width: 90%;
    border-radius: 8px;
    display: block;
}

Answer 4

div quiz的宽度恰好符合按钮的大小。按钮占你div大小的90％。因此，如果您希望按钮占据屏幕的90％，您应该告诉您的div是100％的屏幕。

＆＃13;

.quiz {
    top: 240px;
    position: fixed;
    z-index: -1;
    width: 100%;
}

.quiz button {
    width: 90%;
    border-radius: 8px;
    display: block;
}

＆＃13;

<div class="quiz">
    <button>Option 1</button>
</div>

＆＃13;

这应该正常工作：）

按钮宽度占父级的百分比

4 个答案: