时间戳

首页 > 解决方案 > Css max-width 在 div 中没有按预期工作

html - Css max-width 在 div 中没有按预期工作

问题描述

我有一个 HTML 结构，如：

.container {
  width: 100%;
  height: 300px;
  background-color: blue;
}

.dots-container-wrapper {
  width: 100%;
}

.dots-container {
  max-width: 55px;
  overflow: hidden;
  min-width: 1px;
  display: block;
  padding: 0;
  margin: 0 auto;
  height: 0.875rem;
  position: relative;
}

.dots-container>ul {
  padding: 0;
  display: flex !important;
  transition: all 0.25s;
  position: relative;
  margin: 0;
  list-style: none;
  transform: translateX(0);
  align-items: center;
  bottom: unset;
  height: 100%;
}

.dots-container>ul li {
  width: 6px;
  height: 6px;
  margin: 0 2.5px;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: .7;
}
<div class="container">
  <div class="dots-container-wrapper">
    <div class="dots-container">
      <ul class="dots">
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</div>

问题是 div“dots-container”有一个属性 max-width: 55px。但是如果宽度小于 55px，我想使用实际宽度，但是，div 总是 55px。这是一个问题，因为我在带有点功能的轮播中使用它。当有 5 张图片时，您可以看到 5 个点在中心对齐，但如果图片较少，比如说 2 个，div 仍然是 55px，并且这些点似乎没有在中心对齐。请参阅示例屏幕截图。

在此处输入图像描述

在此处输入图像描述

标签： htmlcss

解决方案

你.dots-container的显示为一个块。默认情况下，块将始终尝试填满整个宽度。通过使容器.dots-container-wrapper显示灵活，它的孩子将只占用他们需要的空间（同时如果需要也将它们居中）。

.dots-container-wrapper {
    width: 100%;
    display: flex; // change to flex
}

.dots-container {
    max-width: 55px;
    overflow: hidden;
    min-width: 1px;
    display: block;
    padding: 0;
    margin: 0 auto;
    height: 0.875rem;
    position: relative;
}

推荐阅读