所以我有一張桌子，我希望按鈕并排而不是堆疊的 Css 或 HTML 很好，但不是 js 抱歉，如果問題不是很清楚，我對此仍然很陌生：/
我試過了
display: flex;
align-items: center;
justify-content: center;
但這只是這樣做
我在下面包含了 CSS 和 html 代碼片段，感謝所有可以幫助我保留 alt 而不是實際影像的人，因為這是我的攝影網站
@charset "UTF-8";
button{
?display:inline-block;
?padding:0.5em 3em;
?border:0.16em solid #FFFFFF;
?margin:0 0.3em 0.3em 0;
?box-sizing: border-box;
?text-decoration:none;
?text-transform:uppercase;
?font-family:'Roboto',sans-serif;
?font-weight:400;
?color:#FFFFFF;
?text-align:center;
?transition: all 0.15s;
}
button:hover{
?color:#DDDDDD;
?border-color:#DDDDDD;
}
button:active{
?color:#BBBBBB;
?border-color:#BBBBBB;
}
@media all and (max-width:30em){
?button{
??display:block;
??margin:0.4em auto;
?}
}<div style="text-align:center">
<button id="wildlife">EG </button><br>
<button id="landscape">EG </button><br>
<button id="ocean">EG </button>
</div>
<div class="wildlife">
<img src="Images/animals/DSC04758.jpg" eight="150" width="200" alt="rocks" />
<img src="Images/animals/bird.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds1.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds2.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds3.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds4.png" eight="150" width="200" alt="rocks" />
</div>
<div class="landscape">
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
</div>
<div class="ocean">
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
</div>
<font face="sans-serif" color="#017bf5" size="5" align="center">
<h1>### </h1>
</font>
<font face="sans-serif" color="#444" size="3" align="center">
<h1>###</h1>
</font>
</body>uj5u.com熱心網友回復：
在您的 HTML 代碼中，您<br>在每個按鈕后使用了標記。這會將您的按鈕推到下一行。
解決方案：移除<br>按鈕元素后的標簽。
uj5u.com熱心網友回復：
按鈕周圍的 div 框，帶有 display: flex; 和 flex-direction: 行；應該管用
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/456500.html