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

Question

尝试使用 Previous 和 Next 按钮进行导航。

希望 Previous 和 Next 位于屏幕的两端。它们需要响应灵敏，并且随着屏幕的大小彼此靠得更近。但是，上一个和下一个按钮不能重叠。

我目前的 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

你应该像这样 float 元素

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>