Html 响应性上一次和下一次导航

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

希望上一个和下一个在屏幕的两端。它们需要反应灵敏，并且随着屏幕的大小彼此浮动得更近。但是，“上一个”和“下一个”按钮不能相互重叠

我目前的CSS和HTML如下所示：

HTML

---

相应地向左/向右浮动按钮，以避免它们与车身标签上的设置

minwidth

发生碰撞

---

您应该像这样浮动元素

CSS

HTML

如果我正确理解您的问题，那么您需要将最小宽度设置为两个链接的最小大小。然后，无论发生什么，它们都会挨在一起。编辑Alien先生的JSFIDLE：只需将最小宽度设置为0，就可以阻止项目相互重叠。很抱歉，如果宽度小于120px，则此解决方案不起作用，它会将代码推到屏幕外。请注意对此进行修复。示例中的slider div不起任何作用。删除它和相应的样式，它的行为仍然相同。你瞄准的是分辨率低于120px的哪些设备？都是举个例子，我无法想象任何人在他们的网站上有两个箭头而没有实际用途，所以我假设它是用于滑块的。但是div名称和宽度都可以轻松调整。这仅仅是为了表明它是有效的，如果他们在一个div中，它的样式也可以简单得多。

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

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

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

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

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