CSS 进度条样式问题

Question

我正在尝试创建顶部带有进度条的页眉。我正在尝试使其响应。我试过阅读它并尝试了一些解决方案但没有成功。所以我的问题是：

如何让进度条随屏幕缩小？到目前为止，我已经使用 tables 来组织元素，我可以包装 table 但进度条本身不会收缩。
如何右对齐进度条使其在全屏时显示在右侧？

这是我的代码：

.header-style {
  background-color: #2A417B;
  height: auto;
  width: auto;
  display: block;
}

.header-text {
  color: white;
  margin: 0em;
  text-align: left;
  font-size: 1.5em;
}

.header-style-logo {
  background-color: #2A417B;
  display: block;
  position: relative;
  text-align: left;
  padding: 1em;
}

.table-wrap {
  display: block;
}

.table-wrap td {
  display: inline-block;
}

progress {
  display: inline-block;
  width: 50em;
  height: 2em;
  margin: 1em;
  /* IE settings */
  color: #8FC23F;
  background-color: white;
  border: none;
}


/* Chrome settings */

progress::-webkit-progress-bar {
  background: white;
}

progress::-webkit-progress-value {
  background: #8FC23F;
}


/* Firefox settings */

progress::-moz-progress-bar {
  background: white;
}

<header class="header-style">
  <table class="table-wrap">
    <tr>
      <td><img class="header-style-logo" src="logo_white.png" width="111" height="72" /></td>
      <td>
        <h1 class="header-text"> My heading</h1>
      </td>
      <td> <progress value="5" max="100"></progress></td>
    </tr>
  </table>
</header>

Answer 1

我建议使用 css 弹性方法来管理您的内容。文档对象模型定义了页面的逻辑结构，保持逻辑结构合乎逻辑是一种很好的做法。将 table 用于除存储表格数据之外的任何其他内容并不是一个好习惯。

您的进度条未响应 view-port/screensize 更改的原因是浏览器正在努力读取 em 的度量（归因于字体大小）。使用 % 作为进度条的度量单位将动态控制其大小。

.header-style {
  background-color: #2A417B;
  height: auto;
  width: auto;
  display: block;
}

.header-text {
  color: white;
  margin: 0em;
  text-align: left;
  font-size: 1.5em;
}

.header-style-logo {
  background-color: #2A417B;
  display: block;
  position: relative;
  text-align: left;
  padding: 1em;
}

.table-wrap {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

progress {
  display: inline-block;
  width: 100%;
  height: 2em;
  margin: 1em;
  /* IE settings */
  color: #8FC23F;
  background-color: white;
  border: none;
}

/* Chrome settings */

progress::-webkit-progress-bar {
  background: white;
}

progress::-webkit-progress-value {
  background: #8FC23F;
}

/* Firefox settings */

progress::-moz-progress-bar {
  background: white;
}
img {
  flex-shrink: 0;
}

<header class="header-style">
  <div class="table-wrap">
       <img class="header-style-logo" src="logo_white.png" width="111" height="72" />
       <h1 class="header-text">My heading</h1>
       <progress value="5" max="100"></progress>
  </div>
</header>

Answer 2

可以尝试这样的百分比：

.header-style {
  background-color: #2A417B;
  height: auto;
  width: auto;
  display: block;
}

.header-text {
  color: white;
  margin: 0em;
  text-align: left;
  font-size: 1.5em;
}

.header-style-logo {
  background-color: #2A417B;
  display: block;
  position: relative;
  text-align: left;
  padding: 1em;
}

progress {
  display: block;
  width: 100%;
  height: 2em;
  /* IE settings */
  color: #8FC23F;
  background-color: white;
  border: none;
}
table{
  width: 100%;
}
td.logo{
  width: 10%;
}
td.heading{
  width: 10%;
}
td.progress{
  width: 80%;
}

/* Chrome settings */

progress::-webkit-progress-bar {
  background: white;
}

progress::-webkit-progress-value {
  background: #8FC23F;
}


/* Firefox settings */

progress::-moz-progress-bar {
  background: white;
}

<header class="header-style">
  <table class="table-wrap">
    <tr>
      <td class="logo"><img class="header-style-logo" src="logo_white.png" width="111" height="72" /></td>
      <td class="heading">
        <h1 class="header-text"> My heading</h1>
      </td>
      <td class="progress"> <progress value="5" max="100"></progress></td>
    </tr>
  </table>
</header>

Answer 3

你可以通过 flexbox 实现类似的功能。

如果您需要单行元素：

.header-style {
  background-color: #2A417B;
  /* define as flex-container */
  /* by default items will be on single line */
  display: flex;
  /* center items */
  align-items: center;
}

.header-text {
  color: white;
  margin-right: 1em;
  text-align: left;
  font-size: 1.5em;
}

.header-style-logo {
  background-color: #2A417B;
  position: relative;
  text-align: left;
  /* don't shrink image */
  flex-shrink: 0;
  padding: 1em;
}

progress {
  width: 50em;
  height: 2em;
  margin: 1em;
  /* moving progress bar to right */
  margin-left: auto;
  /* IE settings */
  color: #8FC23F;
  background-color: white;
  border: none;
}

/* Chrome settings */
progress::-webkit-progress-bar {
  background: white;
}

progress::-webkit-progress-value {
  background: #8FC23F;
}

/* Firefox settings */
progress::-moz-progress-bar {
  background: white;
}

<header class="header-style">
  <img class="header-style-logo" src="logo_white.png" width="111" height="72" />
  <h1 class="header-text"> My heading</h1>
  <progress value="5" max="100"></progress>
</header>

如果你想要多行元素，你需要添加伪元素 margin-left: auto 将其推到右边，CSS order 值小于 progress。演示：

.header-style {
  background-color: #2A417B;
  /* define as flex-container */
  display: flex;
  /* center items */
  align-items: center;
  /* allow moving items to new line */
  flex-wrap: wrap;
}

.header-text {
  color: white;
  text-align: left;
  font-size: 1.5em;
}

.header-style-logo {
  background-color: #2A417B;
  position: relative;
  text-align: left;
  padding: 1em;
  /* don't shrink image */
  flex-shrink: 0;
}

.header-style:after {
  content: "";
  /* adding order to display before progress bar */
  order: 0;
  /* move to the right */
  margin-left: auto;
}

progress {
  width: 50em;
  height: 2em;
  margin: 1em;
  /* IE settings */
  color: #8FC23F;
  background-color: white;
  border: none;
  /* display after pseudoelment */
  order: 1;
}

/* Chrome settings */
progress::-webkit-progress-bar {
  background: white;
}

progress::-webkit-progress-value {
  background: #8FC23F;
}

/* Firefox settings */
progress::-moz-progress-bar {
  background: white;
}

<header class="header-style">
  <img class="header-style-logo" src="logo_white.png" width="111" height="72" />
  <h1 class="header-text"> My heading</h1>
  <div class="margin-left-auto">
  </div>
  <progress value="5" max="100"></progress>
</header>

CSS 进度条样式问题

CSS Progress bar styling issues

html

css

responsive-design

progress