logo标签列表

CSS进度条样式问题

htmlcssresponsive-designprogress
3
我正在尝试创建一个带有进度条的标题，并使其具有响应性。我已经尝试阅读相关资料并尝试一些解决方案，但都未成功。因此，我的问题是：
  1. 如何使进度条随着屏幕的缩小而收缩？到目前为止，我已经使用表格来组织元素，并且可以将表格包装起来，但进度条本身不会收缩。
  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;
}

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

2
我不会选择使用表格作为响应式设计的方法。你为什么要使用表格呢？表格通常用于展示表格数据。 - Cam
我需要将标志、标题和进度条对齐。我尝试使用了一些CSS方法来实现这个目标，但是没有成功。 - Nix
最佳的响应方法是将页面分成“divs”，您可以使用它们来实现相当好的效果，只需要进行一些额外的样式定位等处理即可。就像@Cam所说，“表格”不适合用于响应性设计。 - Sam
@Samuel，这是实现你想要的结果的完美部署方法。如果你觉得需要一个框架来达到这个目的，可以尝试使用Bootstrap。 - Cam
@Cam，我没问问题，是Nix。 - Sam
3个回答
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>

2
这对于表格非常有效，谢谢。我决定听取那些比我更有经验的人的建议，放弃使用表格。 - Nix
2
您可以使用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>

如果您希望进度条始终在同一行上，并且希望在图像上使用flex-shrink: 0;以便在调整大小时不会缩小，请使用flex-wrap: no-wrap; 我建议这样做！ :D - Kanstantsin Arlouski
@Nix 改进了我的答案，现在有多行版本（不需要媒体查询）和单行版本。 - Vadim Ovchinnikov
0

我建议使用CSS Flex方法来管理您的内容。文档对象模型（DOM）定义了页面的逻辑结构，保持逻辑结构的一致性是一个好习惯。除了存储表格数据之外，使用表格并不是一个好的做法。

您的进度条无法响应视口/屏幕大小的更改的原因是浏览器难以读取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>

1
谢谢您提醒我 Flex 属性的存在，本应该自己想到的。非常感激。 - Nix
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接