如何并排而不是堆叠显示按钮

Question

所以我有一个 table，我希望按钮并排而不是堆叠 Css 或 HTML 可以，但不是 js 抱歉，如果问题不是很清楚，我还是新手：/

我试过了

display: flex; align-items: center; justify-content: center;

但这就是这样

我在下面包含了 CSS 和 html 代码片段，感谢所有可以帮助我的人，我保留了替代图片而不是实际图片，因为这是我的摄影网站

@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&nbsp;</button><br>
<button id="landscape">EG&nbsp;</button><br>
<button id="ocean">EG&nbsp;</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>###&nbsp;</h1>
    </font>
    <font face="sans-serif" color="#444" size="3" align="center">
    <h1>###</h1>
</font>

    
</body>

Answer 1

在您的 HTML 代码中，您在每个按钮后使用了 <br> 标签。这会将您的按钮推到下一行。 解决方案： 删除按钮元素后的 <br> 标签。

Answer 2

按钮周围的 div 框显示：flex；和 flex-direction: 行；应该工作

如何并排而不是堆叠显示按钮

How to show buttons side by side instead of stacked

html

css

user-interface

button