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

希望上一个和下一个位于屏幕的两端。他们需要做出反应，并以屏幕大小相互靠拢。但是，上一个按钮和下一个按钮不能相互重叠。

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

来源

2013-05-17 Arjun

如果我没有理解你的问题所在，那么你需要设置的最小宽度至少两个链接的大小。然后，无论发生什么事，他们都会彼此靠近。 –

http://jsfiddle.net/zpYuY/ –

编辑了异形先生的jsfiddle：http://jsfiddle.net/zpYuY/1/只需设置0的最小宽度就可以阻止物品从彼此的身上移开。 –

你应该浮动的元素，像这样

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>

来源

2013-05-17 11:39:56 Vector

你的JsFiddle：http://jsfiddle.net/pB8WU/ –

这工作。谢谢。 – Arjun

浮动左/右相应的按钮，从而避免它们发生碰撞设置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; 
}

来源

2013-05-17 11:38:41

即时通讯不好意思，但是这个解决方案不适用于宽度变小然后120px将代码推到屏幕外的代码。观看http://jsfiddle.net/zpYuY/1/以获取相应的解决方案。 –

你的例子中的滑块div什么都不做。删除它和相应的样式，它仍然表现相同。哪些设备的目标是分辨率低于120像素？ –

这是所有的例子，我不能想象任何人在他们的网站上有2个箭头，没有实际的目的，所以我认为这是一个滑块。但div名称和宽度都可以轻松调整。这仅仅是为了表明它的工作，如果他们在一个div中，它也可以更容易设计。 –

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

回答

相关问题