如何在这些进度条标题之间添加间距？

Posted 2023-03-06

技术标签:

【中文标题】如何在这些进度条标题之间添加间距？【英文标题】：How can I add spacing between these progress bar titles? 【发布时间】：2022-01-17 00:41:59 【问题描述】：

这是一个响应式设计，请确保在您的浏览器上打开切换设备工具栏

我正在尝试制作进度条。首先，我想增加透明黑色背景的高度。我找不到办法做到这一点。我很迷惑。其次，我想添加间距并正确对齐第二和第三文本。

/* progress bar */

.center 
    height: 300px;
    width: 100%;
    position: absolute;
    left: 50%;
    margin-top: 140px;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.678);
    box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
    border-radius: 10px;
    color: white;

.center #progress
    margin: 0px;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 8px;
    border-radius: 20px;
    height: auto;
    background-color: rgba(0, 0, 0, 0);

.skillbar
    box-sizing: border-box;
    width: 100%;
    margin: 20px 0;

/* skillbar languages */
.skillbar-html p
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
    font-weight: bold;
    letter-spacing: 3px;

.skillbar-html p:nth-child(2)
    float: right;
    position: relative;
    top: -30px;

.skillbar-css p
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
    font-weight: bold;
    letter-spacing: 3px;

.skillbar-css p:nth-child(2)
    float: right;
    position: relative;
    top: -30px;

.skill_percentage
    background-color: #262626;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #0fffb7;
    border-radius: 6px;

.skill_level
    background-color: #0fffb7;
    width: 100%;
    height: 10px;
    border-radius: 6px;

<section>
            <div class="center">
                <h1 id="progress">Progress</h1>
                <div class="skillbar-html">
                    <p>HTML</p>
                    <p>90%</p>
                    <div class="skill_percentage">
                        <div class="skill_level" style="width: 90%;"></div>
                    </div>
                    <div class="skillbar-css">
                        <p>CSS</p>
                        <p>70%</p>
                        <div class="skill_percentage">
                            <div class="skill_level" style="width: 80%;"></div>
                        </div>
                        <div class="skillbar-javascript">
                            <p>JavaScript</p>
                            <p>50%</p>
                            <div class="skill_percentage">
                                <div class="skill_level" style="width: 50%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
                </div>
            </div>
        </section>
    </section>

【问题讨论】：

【参考方案1】：

如果我理解正确，您想要增加高度的是包含您的实际进度条的黑色条，对吗？如果是这样的话，我认为这应该可行：

.skill-percentage 
  height: x (here you place how much height you want);

这应该给你你想要的高度。而且，为了添加间距，您可以利用 CSS 填充或边距，具体取决于您的确切需要。我会在这里给你一个小sn-p，这样你就可以明白我的意思了。请注意，我对您的 HTML 进行了一些修改以适合您想要执行的操作，但您的原始文件可能不需要这样做。

/* progress bar */

* 
margin: 0;
padding: 0;


.center 
    height: 500px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.678);
    color: white;

.center #progress
    margin: 0px;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 8px;
    border-radius: 20px;
    height: auto;
    background-color: rgba(0, 0, 0, 0);

.skillbar
    box-sizing: border-box;
    width: 100%;
    margin: 0;

/* skillbar languages */

.text-container 
  display: flex;
  width: 100%;
  justify-content: space-between;


.text-container p 
  padding: 0 40px; /* this is the one that changes the position of your text. Be carefull, you don't want this to change the position too much, just a bit, if you need to change the full position, better try something like grid, or modifying the flex */

.skillbar-html 
  display: flex;
  flex-direction: column;
  justify-content: center;


.skillbar-html p 
  margin: 10px;


.skillbar-html > div 
  margin: 10px;


.skillbar-css 
  display: flex;
  flex-direction: column;
  justify-content: center;


.skillbar-css p 
  margin: 10px;


.skillbar-css > div 
  margin: 10px;


.skillbar-javascript 
  display: flex;
  flex-direction: column;
  justify-content: center;


.skillbar-javascript p 
  margin: 10px;


.skillbar-javascript > div 
  margin: 10px;


.skill_percentage
    height: 20px; /* this is the one that changes your height, now it's changing nothing, but you can modify the height by changing this value */
    background-color: #262626;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #0fffb7;
    border-radius: 6px;

.skill_level
    background-color: #0fffb7;
    width: 100%;
    height: 10px;
    border-radius: 6px;

<section>
            <div class="center">
                <h1 id="progress">Progress</h1>
                <div class="skillbar-html">
                    <div class="text-container">
                      <p>HTML</p>
                      <p>90%</p>
                    </div>
                    <div class="skill_percentage">
                      <div class="skill_level" style="width: 90%;">
                      </div>
                    </div>
                </div>
                <div class="skillbar-css">
                  <div class="text-container">
                    <p>CSS</p>
                    <p>70%</p>
                  </div>
                  <div class="skill_percentage">
                    <div class="skill_level" style="width: 80%;">
                    </div>
                  </div>
                </div>
                <div class="skillbar-javascript">
                  <div class="text-container">
                    <p>JavaScript</p>
                    <p>50%</p>
                  </div>
                  <div class="skill_percentage">
                    <div class="skill_level" style="width: 50%;">
                    </div>
                  </div>
                </div>
            </div>
</section>

【讨论】：

我在顶部有其他元素，背景与之合并。我该怎么办？很抱歉，之前没有看到这个，如果您需要进一步的帮助，请告诉我，也许可以分享您的代码，以便我提供更多帮助。没关系，我修好了。还是谢谢你。【参考方案2】：

您可以利用 HTML 中的 <br> 元素。

当您需要更多地控制浏览器呈现文本的方式时，可以使用换行符和制表符元素。 <BR> 元素用于强制换行。 -W3.org

/* progress bar */

.center 
    height: 300px;
    width: 100%;
    position: absolute;
    left: 50%;
    margin-top: 140px;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.678);
    box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
    border-radius: 10px;
    color: white;

.center #progress
    margin: 0px;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 8px;
    border-radius: 20px;
    height: auto;
    background-color: rgba(0, 0, 0, 0);

.skillbar
    box-sizing: border-box;
    width: 100%;
    margin: 20px 0;

/* skillbar languages */
.skillbar-html p
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
    font-weight: bold;
    letter-spacing: 3px;

.skillbar-html p:nth-child(2)
    float: right;
    position: relative;
    top: -30px;

.skillbar-css p
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
    font-weight: bold;
    letter-spacing: 3px;

.skillbar-css p:nth-child(2)
    float: right;
    position: relative;
    top: -30px;

.skill_percentage
    background-color: #262626;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #0fffb7;
    border-radius: 6px;

.skill_level
    background-color: #0fffb7;
    width: 100%;
    height: 10px;
    border-radius: 6px;

<section>
   <div class="center">
      <h1 id="progress">Progress</h1>
      <br>
      <div class="skillbar-html">
         <p>HTML</p>
         <p>90%</p>
         <div class="skill_percentage">
            <div class="skill_level" style="width: 90%;"></div>
         </div>
         <br>
         <div class="skillbar-css">
            <p>CSS</p>
            <p>70%</p>
            <div class="skill_percentage">
               <div class="skill_level" style="width: 80%;"></div>
            </div>
            <br>
            <div class="skillbar-javascript">
               <p>JavaScript</p>
               <p>50%</p>
               <div class="skill_percentage">
                  <div class="skill_level" style="width: 50%;"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

高度： - 我注意到300px 的固定高度，并且您通过在 CSS 中使用边距和平移使父 div 居中。我继续删除了那些边距和翻译，也删除了你的绝对定位。您可以调整300px 的固定高度以扩展灰色背景。对于这个例子，我把它设置为 100 视图高度。

/* progress bar */

.center 
    height: 100vh;
    width: 100%;
    padding: 20px;
    position: relative;
    background-color: rgba(0, 0, 0, 0.678);
    box-shadow: 0 2px 60px rgba(0, 0, 0, .5);
    border-radius: 10px;
    color: white;

.center #progress
    margin: 0px;
    padding: 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 8px;
    border-radius: 20px;
    height: auto;
    background-color: rgba(0, 0, 0, 0);

.skillbar
    box-sizing: border-box;
    width: 100%;
    margin: 20px 0;

/* skillbar languages */
.skillbar-html p
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
    font-weight: bold;
    letter-spacing: 3px;

.skillbar-html p:nth-child(2)
    float: right;
    position: relative;
    top: -30px;

.skillbar-css p
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
    font-weight: bold;
    letter-spacing: 3px;

.skillbar-css p:nth-child(2)
    float: right;
    position: relative;
    top: -30px;

.skill_percentage
    background-color: #262626;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #0fffb7;
    border-radius: 6px;

.skill_level
    background-color: #0fffb7;
    width: 100%;
    height: 10px;
    border-radius: 6px;

<section>
   <div class="center">
      <h1 id="progress">Progress</h1>
      <br>
      <div class="skillbar-html">
         <p>HTML</p>
         <p>90%</p>
         <div class="skill_percentage">
            <div class="skill_level" style="width: 90%;"></div>
         </div>
         <br>
         <div class="skillbar-css">
            <p>CSS</p>
            <p>70%</p>
            <div class="skill_percentage">
               <div class="skill_level" style="width: 80%;"></div>
            </div>
            <br>
            <div class="skillbar-javascript">
               <p>JavaScript</p>
               <p>50%</p>
               <div class="skill_percentage">
                  <div class="skill_level" style="width: 50%;"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

【讨论】：

是的。通过删除那些样式它现在似乎可以工作了。非常感谢！

以上是关于如何在这些进度条标题之间添加间距？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Android 中向 ViewPager 添加进度条

如何在 shell 脚本中添加进度条？

如何在 fusedlocationproviderclient.oncompletelistener() 中添加进度条？

如何在 Alamofire 4.0 中添加带有上传进度百分比的标签的进度条

lol手游之任务进度条精准计算

在 WebView 中添加进度条