Question

我有上一个/下一个项目按钮的情况，我可以显示上一个和下一个项目按钮，或者只显示一个，具体取决于用户所在的页面。（第一个项目没有上一个按钮，最后一个项目没有下一个按钮）。适用于所有情况的相同代码。

我使用了flexbox和justify-content: space-between;来正常放置它们，然后在移动设备的prev按钮上使用margin-left: 10px;，它非常完美。

对于1个按钮的情况，我添加了margin-left/right将它们推到页面的左/右侧。这会覆盖保证金：自动。

所以你现在看到我的问题是手机上的2按钮情况。当这些按钮明显碰撞时看起来很糟糕，我需要介于两者之间的余量，但我有余量：自动已经在它们上面。

我已添加了当前状态以及以下所有3种情况：

.project-controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.project-controls a {
    width: 100%;
    max-width: 200px;
    padding: 10px 5px;
    border: 1px solid #2c2c2c;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #2c2c2c;
    transition: all 0.3s ease;
}

.project-controls .prev-proj {
    margin-right: auto;
}

.project-controls .next-proj {
    margin-left: auto;
}

<h1>Two buttons</h1>
<section class="project-controls">
    <a class="prev-proj" href="#">Previous Project</a>
    <a class="next-proj" href="#">Next Project</a>
</section>

<h1>One button prev</h1>
<section class="project-controls">
    <a class="prev-proj" href="#">Previous Project</a>
</section>

<h1>One button next</h1>
<section class="project-controls">
    <a class="next-proj" href="#">Next Project</a>
</section>

如何保留现有结构并在移动设备之间保留这些空间？我最好的猜测是有一些不可见的间隔div，我可以用媒体查询显示，但只是想知道是否有人有更快/更清洁的解决方案，我没想到？

由于

Answer 1

两者都不需要保证金自动。您可以为前一个元素设置固定的margin-right。您也不需要使用justify-content。

.project-controls {
    display: flex;
    flex-direction: row;
    /* no need this too
    justify-content: space-between;
    */
}

.project-controls a {
    width: 100%;
    max-width: 200px;
    padding: 10px 5px;
    border: 1px solid #2c2c2c;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #2c2c2c;
    transition: all 0.3s ease;
}

.project-controls .prev-proj {
    margin-right: 20px; /* Changed this */
}

.project-controls .next-proj {
    margin-left: auto;
}

<h1>Two buttons</h1>
<section class="project-controls">
    <a class="prev-proj" href="#">Previous Project</a>
    <a class="next-proj" href="#">Next Project</a>
</section>

<h1>One button prev</h1>
<section class="project-controls">
    <a class="prev-proj" href="#">Previous Project</a>
</section>

<h1>One button next</h1>
<section class="project-controls">
    <a class="next-proj" href="#">Next Project</a>
</section>

Answer 2

我还在网页上使用上一个和下一个按钮。

我还使用flexbox和justify-content: space-between或auto页边距，具体取决于网站（我已将其切换为多样性;最终它们都具有相同的效果）。

我在第一页和最后一页只有一个按钮时遇到了同样的问题。

我的解决方案是在第一页和最后一页上添加一个隐藏按钮。这使得所有页面上的布局行为保持一致，而没有大量额外的CSS（.hidden类只有一两行）。

然后在较小的屏幕上，以避免＆＃34;碰撞＆＃34;完全问题，媒体查询开始使用flex-direction: column。

＆＃13;

.hidden {
  visibility: hidden;
  width: 0;
}

nav {
  display: flex;
  justify-content: space-between;
  border: 1px dashed blue;
}

@media ( max-width: 500px ) {
  nav { flex-direction: column; align-items: center; }
}

＆＃13;

<h3>first page</h3>
<nav>
  <a href="#" class="hidden"></a>
  <a href="#">next</a>
</nav>

<h3>middle page</h3>
<nav>
  <a href="#">previous</a>
  <a href="#">next</a>
</nav>

<h3>last page</h3>
<nav>
  <a href="#">previous</a>
  <a href="#" class="hidden"></a>
</nav>

＆＃13;

弯曲自动边距和上一个/下一个按钮间距

2 个答案:

jsFiddle demo