响应上一个和下一个导航

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

quick demo

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;
}