代码之家 › 专栏 › 技术社区 › TomáÅ¡ Hübelbauer

如何影响HTML5进度元素的最小宽度?

flexbox css3 html5 css html

2

TomáÅ¡ Hübelbauer · 技术社区 · 7 年前

有一个 similar question 那是关于 input 元素的固有最小宽度由 size

我试图设计一个布局,其中有一个 inline-flex 具有 flex-direction: column 像这样的块:

.item {
  border: 1px solid gray;
  display: inline-flex;
  flex-direction: column;
}

<div>
  <div class="item">
    short
    <progress />
  </div>
  <div class="item">
    long on long so long yes long very long certainly longer than the default width of a progress
    <progress />
  </div>
</div>
<p>
  I want the first progress to be as long as the text "short" is.
</p>

Fiddle

progress 正确拉伸由文本长度决定的可用宽度,因为父级 div 内联弹性体 因此,它本身不会在父对象中水平拉伸。

不会收缩到与文本相同的长度。相反,它保持在某个(可能是UA特定的)最小值。我可以用手指影响它的宽度 width

就 大小 然而,问题解决了 ,则不存在此类属性。

有没有办法解决这个布局问题,使进度宽度始终跟随文本宽度?

2 回复 | 直到 7 年前

1

2

Michael Benjamin William Falcon 7 年前

将此添加到您的代码中:

progress { width: auto }

progress 元素将跟踪其内联级别父元素的宽度。

浏览器在屏幕上设置默认宽度要素铬的用途 width: 10em

通过设置自己的宽度,可以覆盖默认宽度。

.item {
  border: 1px solid gray;
  display: inline-flex;
  flex-direction: column;
}

progress {
  width: auto;
}

<div>
  <div class="item">
    short
  <progress></progress>
  </div>
  <div class="item">
    long on long so long yes long very long certainly longer than the default width of a progress
    <progress></progress>
  </div>
</div>
<p>I want the first progress to be as long as the text "short" is.</p>

2

1

Temani Afif 7 年前

除了迈克尔,这里还有一个答案这将迫使宽度 progress 100% 它也可以在firefox上使用:

.item {
  border: 1px solid gray;
  display: inline-flex;
  flex-direction: column;
}

progress {
  width: 0;
  min-width: 100%;
}

<div>
  <div class="item">
    short
    <progress></progress>
  </div>
  <div class="item">
    long on long so long yes long very long certainly longer than the default width of a progress
    <progress></progress>
  </div>
</div>
<p>I want the first progress to be as long as the text "short" is.</p>