Html Bulma-按钮类强制内联

我是新手，但一直试图用它制作一个简单的网页

我遇到了一个令人沮丧的问题，我认为其中一个类“button is large”强制页面上的元素内联

下面是一个最简单的代码演示：

  <div class="column" style="height: 200px">
    <a class="button is-fullwidth" style="height: 100%">
       <p> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt=""> </p>
       <p class="title">Print Release</p>
    </a>
  </div>

展示我为解决问题所采取的不同方法。我尝试了三种不同的方法使这些元素出现在新行上，但都没有效果

这只是“button…”类的固有属性吗？我可以在保留新行的同时保留button类吗？
你给了锚一个button类和全宽

class
按钮始终将内容内联放置

HTML

<a class="btn is-fullwidth" style="height: 100%">
   <p> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt=""> </p>
   <p class="title">Print Release</p>
</a>

我用自定义类名
btn
更改了
按钮
类，然后我给它一个中心对齐CSS
类
按钮
使用flexbox设置样式。属性
display:flex
使其内容显示为“内联”。您可以了解有关flexbox和的更多信息

有几种方法可以获得您想要的布局，以下是一种方法：

将
.is block
修改器添加到
a.button
-这将覆盖
显示
属性，并确保块元素将堆叠。在您的示例中，
p
是块元素，
img
是
inline
元素。（或者，您可以在CSS中通过向按钮添加
flex-direction:column
来更正此问题。）

不必使用内联CSS调整
.column
的高度，您可以创建一个新的修改器类，在需要固定高度时可以将其添加到列中。我在
列
中添加了
是固定高度
和
高度-200
，并使用了一些自定义CSS来定义它们

Bulma给出了
.button
的
高度
为
2.25em
。您需要使用
100%
覆盖此选项。同样，您可以创建一个修改器类并将其添加到按钮中（类似于
is-height-100
），或者简单地使用CSS定位您想要的按钮。这两个选项都比使用内联CSS更可取

您使用的图像太大，无法在按钮下方显示文本。不要在列上使用
height:200px
，而是使用
minheight
。如果必须使用
高度
200px
，则需要对图像进行一些调整。让我知道，我可以试着帮忙



.is-fixed-height.height-200{
最小高度：200px；
}
.is-fixed-height.height-200.按钮{
身高：100%；
}

打印版本

打印版本

打印版本

好的，这就是我要确定的。没有办法避免这种行为？是的，但是如果您能够提供另一种结构化HTML的方式，您会非常感激。我想保留button类的外观，但没有内联元素您可以将
button
类更改为自定义类名，并为其提供您自己的CSS样式，好的，我将编辑我的答案以向您展示这正是我所要的。你提供的小提琴现在似乎对我有用！只有两个问题：你们怎么知道button在使用flexbox？为什么内联CSS如此不受欢迎（这个答案的链接，我假设它是广泛的，是好的）？很高兴它有帮助。关于第一个问题，您可以使用浏览器的开发工具来检查将什么CSS应用于元素。在Chrome F12中，会将它们带上来。这里的更多信息：。你的第二个问题之前已经被问过了，所以我只想链接你：出于好奇，我有没有办法将任何图像（合理大小可能是300px X 300px）放入按钮？@Aball是的，这些尺寸将与代码一起工作。理想情况下，您可以将
.image
类添加到图像中，并将其包装在自己的容器中。您可以查看各种Bulma组件，以及它们如何处理图像，例如卡
.btn {
text-align: center;
}