如何浮动左轮播左控件？答案

【问题标题】：How to float left carousel left control?如何浮动左轮播左控件？
【发布时间】：2013-06-27 12:44:50
【问题描述】：

我正在尝试将左右轮播按钮控件重新定位在我的轮播右下角。但是，我不知道如何浮动左侧控件而不浮动右侧？

初始页面加载：

将页面拖得更宽后：

Float 不包含在代码中，但我尝试使用 float:right 和左侧控件。

<a class="left carousel-control" href="#mainCarousel" data-slide="prev"  style="margin: 348px 0 0 770px">&lsaquo;</a>   
<a class="right carousel-control" href="#mainCarousel" data-slide="next"   style="margin: 348px -20px 0 0">&rsaquo;</a>

我尝试将两者都放入 div 并向右浮动，但没有成功。

我基本上希望两个轮播按钮在轮播的右下角彼此相邻。在页面加载时，我的边距将下一个/上一个按钮重新定位到右下部分，最初它们一起出现，但是当您将浏览器向右拖动时，它会扩大/拉伸控件并且控件分开（向右移动但左侧保持固定）。这是 JSFIDDLE -> http://jsfiddle.net/LneL8/

【问题讨论】：

你能把代码放在像jsbin这样的工具上吗？
你只是想把左边放在一边，右边放在右边吗？
这里是 JSFiddle -> jsfiddle.net/LneL8
@Pjack：或多或少，正确的！
我创建了一个答案。我删除了页边距，因为它们对于页面来说太大了。这也可能让你感到困惑。

标签： twitter-bootstrap

【解决方案1】：

您是否试图将它们放在页面的两侧？

我查看了您的 jsFiddle，但看不到箭头。

但假设您的箭头 HTML 代码是这样的：

<input type="button" class="leftArrow" value="left" />
<input type="button" class="rightArrow" value="right" />

要让左箭头向左“浮动”，右箭头向右“浮动”，请添加以下 CSS：

.leftArrow { position: relative; float: left; }
.rightArrow { position: relative: float: right; }

记住：使职位“相对”很重要。否则浮动将无法工作。

【讨论】：

嗨，这不是我想要做的。我希望箭头按钮在右下角彼此相邻，就像这样-> bit.ly/139ufJI（这将是页面加载的初始位置）。问题是当页面被调整大小时（即浏览器被从左拖到右使网页变大）。左侧按钮保持不动，右侧随页面移动 -> bit.ly/16ARtWh。当页面或轮播调整大小时，我希望它们一起留在右下角。

【解决方案2】：

这就是你想要做的。例如，我取出了边距。 http://jsfiddle.net/ZS4KR/

 <div id="buttons">
    <p class="floatLeft"><a class="left carousel-control" href="#mainCarousel" data-slide="prev">Left</a> </p>

    <p class="floatRight"><a class="right carousel-control" href="#mainCarousel" data-slide="next">Right</a></p>
    </div>

CSS

.floatRight{
    float:right;
}
.floatLeft{
    float:left;
}

编辑：

我更新了你的小提琴http://jsfiddle.net/LneL8/1/

【讨论】：

嗨，这不是我想要做的。我希望箭头按钮在右下角彼此相邻，就像这样-> bit.ly/139ufJI 。问题是当页面被调整大小时（即浏览器从左向右拖动，使网页变大）。左键保持不动，右键随页面移动 -> bit.ly/16ARtWh。当页面或轮播调整大小时，我希望它们一起留在右下角。