Отзывчивая предыдущая и следующая навигация

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