我正在使用 Bulma(和带有 Vue 的 Buefy),我有一个面板,其中包含一系列定义如下的元素:
<template>
<div v-if="user">
<nav class="panel">
<p class="panel-heading">
Cities
</p>
<div class="panel-block" v-for="c in user.cities">
<div class="is-pulled-left">{{c}}</div>
<div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
</div>
</nav>
</div>
</template>
看起来像这样:
如何让按钮右对齐,而不是左对齐?
最佳答案
2021 年更新:较新版本的 bluma 有其 flex box 助手。您只需向我们的 panel-block
添加一个类即可实现此效果。像这样使用 is-justify-content-space-between
:
<div class="panel-block is-justify-content-space-between" v-for="c in user.cities">
<div class="is-pulled-left">{{c}}</div>
<div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
</div>
使用justify-content: flex-end
通过检查 html,我们可以看到 Bulma 类 panel-block
将 justify-content: flex-start
应用于它的所有子元素。这意味着即使您将 is-pulled-right
应用到内部 div,所有内容都将始终位于左侧。将 justify-content: flex-end
应用到外部父容器将强制一切向右。因此,简而言之,您可以覆盖 Bulma 的一些默认样式以获得您想要的。
.end {
justify-content: flex-end !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div>
<nav class="panel">
<p class="panel-heading">
Cities
</p>
<div class="panel-block end">
<div class="">New York</div>
</div>
<div class="panel-block end">
<div class="">London</div>
</div>
<div class="panel-block end">
<div class="">Paris</div>
</div>
</nav>
</div>
关于css - 如何使用 Bulma 创建一系列行,其中按钮在 css 中右对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51450037/