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

Question

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

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

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

Answer 1

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

Line break and tab elements can be used when you need a little more control over how the browser renders the text. The <BR> element is used to force a line break.
-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。我继续删除了那些边距和翻译，也删除了你的绝对定位。您可以调整 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>

Answer 2

如果我没理解错的话，你想要增加高度的是那个包含你实际进度条的黑条，对吧？如果是这样，我认为这应该可行：

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

这应该会给你你想要的高度。而且，为了添加间距，您可以利用 CSS 填充或边距，具体取决于您的确切需要。我会在这里给你一个小片段，这样你就可以明白我的意思了。请注意，我对您的 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>

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

How can I add spacing between these progress bar titles?

html

css

spacing

progress-bar