html - 响应式上一个和下一个导航

Question

尝试使用“上一个”和“下一个”按钮进行导航。

希望上一个和下一个在屏幕的两端。它们需要响应并随着屏幕的大小而彼此靠近。但是，上一个和下一个按钮不能相互重叠。

我当前的 CSS 和 HTML 如下：

HTML

<div id="navigation_wrapper">
<div><a href="previous.html">previous</a><a href="next.html">next</a></div></div>

连接的 CSS

div#navigation_wrapper {
   width: 100%;
   padding: 5px 0px 30px 0px;
   background-color: orange; 
   opacity:0.8;
 }

Answer 1

你应该像这样浮动元素

CSS

div#navigation_wrapper {
   width: 100%;
   background-color: orange; 
   opacity:0.8;
 }
#prev-button {
    float:left;
}
#next-button {
    float:right;
}

HTML

<div id="navigation_wrapper">
    <a id="prev-button" href="previous.html">previous</a>
    <a id="next-button" href="next.html">next</a>
</div>

Answer 2

相应地向左/向右浮动按钮并避免它们碰撞设置min-width在 body 标签上

快速演示

body{
    min-width:120px
}
div#navigation_wrapper {
   width: 100%;
   padding: 5px 0px;
   background-color: orange; 
   opacity:0.8;
    overflow:hidden;
 }
a[href*="previous.html"]{
    float: left;
}

a[href*="next.html"]{
    float: right;
}