时间戳

首页 > 解决方案 > 为什么 max-width 设置固定元素的宽度？

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

问题描述

我有这个 ：

#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 */
}
<div id="toast">Hi</div>

我想要我的元素 250px 宽，但它是 90vw。（250px可以是50px，还是有问题）为什么是90vw，没有内容的情况下怎么变成250px？它仍然应该居中。transform: translateX(-50%)不起作用，因为那样它的宽度不会超过 50vw。

标签： css

解决方案

因为当您同时设置left和right结合width:auto（默认值）时，元素的宽度将被计算为“填充偏移量”——您在这里有效地设置了 100% 的宽度。

删除right:0（或左）和宽度是你所期望的：

#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;
}
<div id="toast">Hi</div>

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

body {
 display:flex;
}

#toast {
  background-color: pink;
  margin: auto;
  max-width: 90vw;
  min-width: 250px;
  font-size: 16px;
}
<div id="toast">Hi</div>

推荐阅读