Question

我有这个：

＆＃13;

#toast {
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 20px;
  width: auto;/* not needed */
  max-width: 90vw;
  min-width: 250px;
  font-size: 16px;
  background: red;/* for refrence */
}

＆＃13;

<div id="toast">Hi</div>

＆＃13;

我希望我的元素宽250px，但它是90vw。（250px可以是50px，仍有问题）为什么它是90vw，如何在没有内容的情况下将其设为250px？它应该仍然是中心的。 transform: translateX(-50%)不起作用，因为它不会超过50vw。

Answer 1

因为当您同时设置left和right时，结合width:auto（默认值），元素width will be calculated到＆＃34填写抵消额度＃34; - 你在这里有效地设置了100％的宽度。

删除right:0（或左侧），宽度是您所期望的：

＆＃13;

#toast {
  background-color: pink;
  position: fixed;
  left: 0;
  //right: 0;
  margin: auto;
  bottom: 20px;
  width: auto;
  max-width: 90vw;
  min-width: 250px;
  font-size: 16px;
}

＆＃13;

<div id="toast">Hi</div>

＆＃13;

要使元素居中，一种非常简单的方法是在正文上设置display:flex ，因为当您将自动边距应用于弹性项目时，该项目将自动扩展其指定的边距以占用Flex容器中的额外空间：

＆＃13;

body {
 display:flex;
}

#toast {
  background-color: pink;
  margin: auto;
  max-width: 90vw;
  min-width: 250px;
  font-size: 16px;
}

＆＃13;

<div id="toast">Hi</div>

＆＃13;

Answer 2

添加到@Sweaver2112说什么，因为边距不适用于绝对/固定定位，要使其居中，您可以尝试这样的事情。

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.parent {
  background-color: brown;
  text-align: center;
  position: fixed;
  bottom:0;
}

.toast {
  /* To remove center being inherited  */
  text-align: initial;
  /* Inline level elements get moved by text-align property of their parent */
  display: inline-block;
  max-width: 90vw;
  min-width: 250px;
  background: orange; 
}

<div class="parent">
  <div class="toast">
    <h3>Triggering the min-width </h3>
  </div>
  <div class="toast">
    <h3>Triggering the max-width </h3>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

为什么max-width设置固定元素的宽度？

2 个答案: