無論我做什麼(現在幾個小時),我都無法將 <div class="kafelek">
彼此相鄰對齊;目前的程式碼如下所示:
body { background-color: #003C3D; } .header { text-align: center; align-content: center; padding: 20px; font-family: 'Open Sans'; font-size: 24px; color: #C3CECB; } #headerlogo { width: 400px; height: auto; object-fit: cover; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); animation: slide-in 1s ease-in-out forwards; } @keyframes slide-in { from { top: -100px; } to { top: 20px; } } .pre1 { width: 50%; text-align: center; align-content: center; font-family: 'Open Sans'; font-size: 24px; color: #C3CECB; float: left; } .pre2 { width: 50%; text-align: center; align-content: center; font-family: 'Open Sans'; font-size: 24px; color: #C3CECB; float: right; } .alignkafel1, .alignkafel2 { display: flex; flex-wrap: wrap; } .row { display: flex; } .kolumna { display: inline-block; width: 48%; font-family: 'Open Sans'; color: #C3CECB; text-align: center; display: flex; flex-wrap: wrap; justify-content: space-between; } .kolumna:first-child { margin-right: 0px; } .kolumna:last-child { margin-left: 0px; } .row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 800px) { .kolumna { width: 100%; align-content: center; } } kolumna2 { display: inline-block; width: 48%; font-family: 'Open Sans'; color: #C3CECB; text-align: center; display: flex; flex-wrap: wrap; justify-content: space-between; } .kolumna2:first-child { margin-right: 0px; } .kolumna2:last-child { margin-left: 0px; } @media screen and (max-width: 800px) { .kolumna2 { width: 100%; align-content: center; } } .kafelek { background-color: #006D57; border-radius: 10px; text-align: center; height: 100px; font-family: 'Open Sans'; font-size: 20px; color: #C3CECB; margin: 5px; margin-top: 50px; margin-right: 50px; margin-bottom: 1px; margin-left: 30px; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 800px) { .kafelek { display: flex; justify-content: center; } } .kafelek:hover { border: 2px solid #7EDF00; transition: 0.3s; cursor: pointer; }
<div class="header"> <img src="" img id="headerlogo" /> <br /> <br /> Centrum zgłoszeniowe AOK </div> <div class="pre1"> Delivery Support </div> <div class="pre2"> Middle Mile</div> <div class="alignkafel1"> <div class="kafelek">Koszta Dodatkowe</div> <div class="kafelek">COMING SOON</div> <div class="kafelek">COMING SOON</div> <div class="kafelek">COMING SOON</div> </div> <div class="alignkafel2"> <div class="kafelek">COMING SOON</div> <div class="kafelek">COMING SOON</div> <div class="kafelek">COMING SOON</div> <div class="kafelek">COMING SOON</div> </div>
我一直在嘗試多種選擇,但最終一切都變得一團糟。
它看起來像這樣: 網站混亂
我希望 8 個 .kafelek
(即按鈕)中的每一個都在 1 行中彼此完美對齊,並且正確居中以與 .pre1 和 .pre2 對齊
請幫忙;-;
按鈕容器的寬度為 0,這會阻止彈性盒正常運作。增加寬度可以解決問題。
我添加了
60%
的寬度,以使按鈕與上面的pre
大致對齊。目前,pre
設定了float
屬性。理想情況下,您希望父容器強制執行頁面內容的邊界並避免使用float
css 屬性。