Akan sangat menghargai bantuan dalam hal ini. Jadi, saya ingin menyelaraskan kembali gambar pertama agar terlihat seperti gambar kedua. Saya mengharapkan space-between untuk mendistribusikan ruang secara merata di antaranya, jadi saya mencoba menggunakan justify-content: space-between yang sayangnya tidak berhasil. Tahu kenapa?

current code

expected result

HTML

@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");

* {
  box-sizing: border-box;
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container {
  text-align: center;
}

.progress-container {
  display: flex;
  justify-content: space-between;
  width: 350px;
  max-width: 100%;
  border: 1px solid blue;
  position: relative;
  margin-bottom: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/style.css" />
  <title>Progress Bar</title>
</head>
<body>
<div class="container">
  <div class="progress-container">
    <div class="progress" id="progress"></div>
    <div class="circle active">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
  </div>
  <div class="btn-container">
    <button class="btn" id="prev" disabled>Prev</button>
    <button class="btn" id="next">Next</button>
  </div>
</div>
<script src="./js/main.js"></script>
</body>
</html>

Terima kasih sebelumnya!

0
jecrram 8 Januari 2021, 07:09

3 jawaban

Jawaban Terbaik

Di flex div semua item mendapatkan lebar yang sama, jika Anda mengatur div kosong maka itu juga dianggap sebagai satu item dari div fleksibel itu sebabnya div kelas "kemajuan" Anda juga mendapatkan lebar yang sama tidak peduli ada data atau tidak di div .

Untuk membuat desain keinginan Anda, buat kelas "kemajuan" disembunyikan.

.progress {
  display: none;
}
0
Taskmaster 8 Januari 2021, 04:21

Karena ada div lain sebelum circle 1. Itu harus dihapus:

<div class="container">
  <div class="progress-container">
    <div class="circle active">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
    </div>
    <div class="btn-container">
      <button class="btn" id="prev" disabled>Prev</button>
      <button class="btn" id="next">Next</button>
  </div>
</div>

Coba biola ini di sini: http://jsfiddle.net/usf9Lcdg/

0
KienHT 8 Januari 2021, 04:16

Ini terjadi karena DIV id="progress" yang mengambil spasi di baris ...

@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");

* {
  box-sizing: border-box;
}

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.container {
  text-align: center;
}

.progress-container {
  display: flex;
  justify-content: space-between;
  width: 350px;
  max-width: 100%;
  border: 1px solid blue;
  position: relative;
  margin-bottom: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/style.css" />
  <title>Progress Bar</title>
</head>
<body>
<div class="container">
    <div class="progress" id="progress"></div>
  <div class="progress-container">
    <div class="circle active">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
  </div>
  <div class="btn-container">
    <button class="btn" id="prev" disabled>Prev</button>
    <button class="btn" id="next">Next</button>
  </div>
</div>
<script src="./js/main.js"></script>
</body>
</html>
0
Ahmed Mansour 8 Januari 2021, 04:16