如何使用 flexbox 水平放置 3 个按钮？ [复制]
Posted
技术标签:
【中文标题】如何使用 flexbox 水平放置 3 个按钮？ [复制]【英文标题】：How to use flexbox to position 3 buttons horizontally? [duplicate] 【发布时间】：2019-11-20 03:27:00 【问题描述】：我有 3 个按钮，我试图将它们排成一行（例如 prev btn、middle btn、next btn），现在我只是将它显示为一个按钮在另一个 2 的顶部。我不能更改html只是css fyi
body
color: #838383;
font-family: "Mada", sans-serif;
font-size: 0.875rem;
.post .pagination
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
.post .pagination a
width: 48%;
.post .pagination .link
border: 2px solid #007cad;
text-align: center;
margin-bottom: 0.75rem;
padding: 0.5rem;
.post .pagination a,
.post .pagination .view-all
text-decoration: none;
color: #007cad;
font-weight: 700;
.post .pagination .view-all
width: 100%;
/* hover effects */
.pagination .link
background: #fff;
color: #007cad;
background-size: 250% 100%;
.pagination .next .link
background: linear-gradient(to left, #fff 50%, #007cad 50%);
background-size: 250% 100%;
background-position: right top;
transition: all 0.5s ease;
max-width: 250px;
.pagination .prev .link
background: linear-gradient(to right, #fff 50%, #007cad 50%);
background-size: 250% 100%;
background-position: left top;
transition: all 0.5s ease;
max-width: 250px;
.pagination .next .link:hover
background-position: left top;
.pagination .prev .link:hover
background-position: right top;
.pagination .next .link:hover,
.pagination .prev .link:hover
background-color: #007cad;
color: #fff;
opacity: 1;
@media only screen and (min-width: 1366px)
.post .pagination
padding-right: 0.9375rem;
padding-left: 0.9375rem;
max-width: 50rem;
margin: 0px auto 0 auto;
<body>
<div class="post grid-x grid-padding-x">
<div class="small-12 medium-10 medium-offset-1 cell pagination">
<a class="view-all">
<div class="link">View full team member list</div>
</a>
<a class="prev">
<div class="link">< Prev bio</div>
</a>
<a class="next">
<div class="link">Next bio ></div>
</a>
</div>
</div>
</body>我有 3 个按钮，我试图将它们排成一行（例如 prev btn、middle btn、next btn），现在我只是将它显示为一个按钮在另一个 2 的顶部。我用过flexbox 来显示它当前的状态，但我很难像我上传的解决方案图片一样将这些按钮对齐在一起。
<body>
<div class="post grid-x grid-padding-x">
<div class="small-12 medium-10 medium-offset-1 cell pagination">
<a class="view-all">
<div class="link">View full team member list</div>
</a>
<a class="prev">
<div class="link">< Prev bio</div>
</a>
<a class="next">
<div class="link">Next bio ></div>
</a>
</div>
</div>
</body>
【问题讨论】：
您需要发布相关的 CSS 类以查看它们在做什么。 您在使用 Zurb 基金会吗？您是否有任何影响您的代码的现有样式？我们需要查看minimal reproducible example 以提供真正适用的帮助。 假设你想用 CSS 做这个，请显示你的 CSS 是的，很抱歉这篇文章是用当前的 css 更新的 【参考方案1】：你可以使用 display: flex;如果您无法更改结构，则移动元素。 （不建议）。如果您可以更改 HTML 本身，它会更容易。如果你想把它们放在一起，你可以使用一些 CSS flexbox。
您可以在此处了解有关 flexbox 的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
body
color: #838383;
font-family: "Mada", sans-serif;
font-size: 0.875rem;
.post .pagination
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
.post .pagination a
flex: 1; /* changed */
margin: 10px; /* added */
.post .pagination .link
border: 2px solid #007cad;
text-align: center;
margin-bottom: 0.75rem;
padding: 0.5rem;
.post .pagination a,
.post .pagination .view-all
text-decoration: none;
color: #007cad;
font-weight: 700;
.post .pagination .view-all
/* width: 100%; -- removed */
order: 2;
/* added */
.post .pagination .next
order: 3;
/* end added */
/* hover effects */
.pagination .link
background: #fff;
color: #007cad;
background-size: 250% 100%;
.pagination .next .link
background: linear-gradient(to left, #fff 50%, #007cad 50%);
background-size: 250% 100%;
background-position: right top;
transition: all 0.5s ease;
max-width: 250px;
.pagination .prev .link
background: linear-gradient(to right, #fff 50%, #007cad 50%);
background-size: 250% 100%;
background-position: left top;
transition: all 0.5s ease;
max-width: 250px;
.pagination .next .link:hover
background-position: left top;
.pagination .prev .link:hover
background-position: right top;
.pagination .next .link:hover,
.pagination .prev .link:hover
background-color: #007cad;
color: #fff;
opacity: 1;
@media only screen and (min-width: 1366px)
.post .pagination
padding-right: 0.9375rem;
padding-left: 0.9375rem;
max-width: 50rem;
margin: 0px auto 0 auto;
<div class="post grid-x grid-padding-x">
<div class="small-12 medium-10 medium-offset-1 cell pagination">
<a class="view-all" href="<?= get_field('team_page', 'options') ?>">
<div class="link">View full team member list</div>
</a>
<a class="prev">
<div class="link">< Prev bio</div>
</a>
<a class="next">
<div class="link">Next bio ></div>
</a>
</div>
</div>【讨论】：
不建议使用 order 属性（屏幕阅读器等）。如果您可以更改 HTML 本身，但在某些情况下，它可能会有所帮助。 -- 添加您自己的 css 样式，在您编辑您的帖子之前丢失。以上是关于如何使用 flexbox 水平放置 3 个按钮？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章