CSS实现卡片图标对齐与自定义尺寸Bar开发相关问题求助

解决方案 #

JSX代码修改 #

调整卡片内部结构，拆分图标容器、文本容器、进度条组件，同时修复原有语法问题：

<div className="col-md-12">
  <Tabs
    defaultActiveKey="recents"
    id="uncontrolled-tab-example"
    className="mb-3 background-tabs"
  >
    <Tab eventKey="recents" title="Récents (7)">
      <div className="col-md-12">
        <ul className="list-group">
          {tutorials &&
            tutorials.map((tutorial, index) => (
              <li
                className={
                  "conseil-card" +
                  (index === currentIndex ? " active" : "")
                }
                onClick={() => setActiveTutorial(tutorial, index)}
                key={index}
              >
                {/* 左侧图标组容器 */}
                <div className="conseil-card-icons">
                  <IconAdd />
                  <IconDrag />
                </div>
                {/* 中间文本内容容器 */}
                <div className="conseil-card-content">
                  <p>{tutorial.isPack ? "test" : tutorial.message}</p>
                  <div className="conseil-card-title">
                    Titre : {tutorial.title}
                    {tutorial.isPack ? "Pack oui" : "Pack non"}
                  </div>
                  {/* 自定义进度条 */}
                  <div className="conseil-progress-wrap">
                    <div 
                      className="conseil-progress-bar"
                      style={{width: `${tutorial.progress || 60}%`}}
                    ></div>
                  </div>
                </div>
              </li>
            ))}
        </ul>
      </div>
    </Tab>
  </Tabs>
</div>

CSS代码修改 #

删除原有float相关样式，改用flex布局解决对齐问题，新增进度条样式：

.conseil-card {
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 4px 4px 12px #00000014;
  border-radius: 15px;
  position: relative;
  /* 改用flex横向排列 */
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  color: #212529;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.125);
  text-align: left;
  font: normal normal normal 16px/22px Poppins;
  letter-spacing: 0px;
  opacity: 1;
  margin: 8px;
}

/* 左侧图标容器 */
.conseil-card-icons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  flex-shrink: 0;
}

.conseil-card svg {
  width: 20px;
  height: 20px;
}

.conseil-card-content {
  flex: 1;
  width: calc(100% - 52px);
}

.conseil-card p {
  margin: 0 0 8px 0;
}

.conseil-card-title {
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}

/* 进度条样式 */
.conseil-progress-wrap {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background-color: #f0f0f0;
  overflow: hidden;
}

.conseil-progress-bar {
  height: 100%;
  background-color: #2196F3; /* 可自行修改进度条颜色 */
  border-radius: 4px;
  transition: width 0.3s ease;
}

自定义调整说明 #

• 进度条宽度可以通过tutorial.progress字段绑定对应数值，取值范围0-100即可实现不同长度的Bar展示
• 图标间距、卡片内边距、进度条高度/颜色均可根据设计稿自行调整对应CSS参数

内容的提问来源于stack exchange，提问作者Pouney Design