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

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

flexbox css3 html5 css html

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

有一个 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 回复 | 直到 6 年前

Michael Benjamin 6 年前

将此添加到您的代码中:

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>

Temani Afif 6 年前

除了迈克尔,这里还有一个答案这将迫使宽度 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>

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

6 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

6 年前

Adam Olsson · 在中心CSS中对齐单个列表项

6 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

6 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

6 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

6 年前