无论我做什么(现在几个小时),我都无法将 <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 属性。