时间戳

首页 > 解决方案 > 为步骤进度条对齐两个 div 和 hr 标签

html - 为步骤进度条对齐两个 div 和 hr 标签

问题描述

我有以下进度条 在此处输入图像描述

  1. 我希望“创建”、“分配”的 div 位于圆圈下方并同时居中“小时”线应该接触圆圈。应该适用于不同的屏幕尺寸
  2. 如何在这里制作完美的圆圈？

HTML

<div class="container">
    <div   class="progress">

        <div id='content' class='filledCircle'></div>
          <div>Created</div>
            <hr class="line">
        <div id='content' class='filledCircle'></div>
          <div>Assigned</div>

    </div> 
</div>

CSS

.container{
 position: relative;
 border: 3px solid mistyrose;
 margin-left: 50%;

}

.progress{
 display: flex;
}

hr.line{
 border: none;
 background: grey;
 width: 100%;
 height: 2px;
}

.filledCircle{
 height: 25px;
 width: 25px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
}

提前致谢 ：）

标签： htmlcssfrontendline

解决方案

为了制作更好的圆圈，您可以使用 Padding 

.container{
 position: relative;
 border: 3px solid mistyrose;
 margin-left: 50%;

}

.progress{
 display: flex;
 align-items:center
}

hr.line{
 border: none;
 background: grey;
 width: 100%;
 height: 2px;
}

.filledCircle{
padding:15px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
}
<div class="container">
    <div   class="progress">

        <div id='content' class='filledCircle'></div>
          <div>Created</div>
            <hr class="line">
        <div id='content' class='filledCircle'></div>
          <div>Assigned</div>

    </div> 
</div>

只需align-items: center在您的 CSS 文件中使用并使用填充而不是宽度和高度

.progress {
   display: flex;
   align-items: center;
}

    .filledCircle {
      padding: 15px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
    }

推荐阅读