CSS进度条样式问题

Question

我尝试在顶部创建一个带有进度条的标题。我试图让它变得敏感。我试过阅读它并尝试了一些解决方案但没有成功。所以我的问题是：

1. 如何通过屏幕缩小进度条？到目前为止，我已经使用表来组织元素，我可以包装表格，但进度条本身不会缩小。
2. 如何右对齐进度条，使其在全屏显示时显示在右侧？

这是我的代码：

＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

可以尝试这样的百分比：

.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 2

你可以通过flexbox实现这样的目标。

如果您需要单行元素：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果您想要多行上的元素，则需要使用margin-left: auto添加伪元素以将其推向右侧，并将CSS order值小于progress。演示：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我建议使用css flex方法来管理您的内容。文档对象模型定义了页面的逻辑结构，保持逻辑结构是合乎逻辑的。使用表格来存储表格数据，这不是一个好习惯。

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;