CSS Float还有问题

Question

以下代码通过jQuery注入到页面中。我不能改变它，但我可以改变css：

<div id="slideshow-prevnext" class="slideshow-prevnext"> 
  <a id="prev" class="left"  href="#"><span class="invisible">Prev</span></a> 
  <a id="next" class="right" href="#"><span class="invisible">Next</span></a> 
  <a href="#" class="dot">&nbsp;</a>
  <a href="#" class="dot">&nbsp;</a>
  <a href="#" class="dot">&nbsp;</a>
</div>

我想要三个

<a href="#" class="dot">&nbsp;</a>

出现在左侧，右侧出现两个（“上一个”和“下一个”）。

我该怎么办？我试过了float:left但是没有用。

修改：CSS太长，无法发布。开发网站位于：http://site2.ewart.library.ubc.ca/

Answer 1

最基本的答案：

  a.left, a.right { float: right;}
  a.dot { float: left;}

此外，看起来样式表'/profiles/ubc_clf/themes/logie/style.css'第37行胜过你的浮动：

  #slideshow-prevnext .left {
    background: url(http://site2.ewart.library.ubc.ca/profiles/ubc_clf/themes/logie/images/controller/controller_left_button_on.gif) no-repeat;
    **float: left;**
    height: 30px;
    margin-top: 8px;
    text-decoration: none;
    width: 29px;
  }

如果要在右边，则需要阅读：

 float: right;

为了实现这一点，您需要提供一种比＃slideshow-next .left规则更具体的CSS样式。例如，将其放在页面＆lt; head＆gt;中标记：

<style type="text/css">
  #slideshow-prevnext .left, #slideshow-prevnext .right {
    float: right;
  }
</style>

因为＆lt; style＆gt;页面上的标记优先级高于之前加载的标记，规则应覆盖浮点值。

Answer 2

你可以通过这个例子来做到这一点。

<div class="wrapper">
<div style="float:left"><a href="">&nbsp</a></div>
<div style="float:right;"><a href="">Prev</a> | <a href="">Next</a></div>
<div style="clear:both;"></div>
</div>

我使用过Inline Css。您也可以通过课程或外部Css来完成。

Answer 3

如果没有看到你的CSS，很难猜出你的工作方式。

假设left和right是左/右浮动的css类，只需删除它们并将链接向下移动：

<div id="slideshow-prevnext" class="slideshow-prevnext"> 
  <a href="#" class="dot">&nbsp;</a>
  <a href="#" class="dot">&nbsp;</a>
  <a href="#" class="dot">&nbsp;</a>
  <a id="prev" href="#"><span class="invisible">Prev</span></a> 
  <a id="next" href="#"><span class="invisible">Next</span></a> 
</div>

如果你想要一个更好的例子，你必须发布你的CSS。

Answer 4

我对这种做事方式并不是特别满意 - 理想情况下你应该改变Javascript。

• 点击#slideshow-prevnext添加position: relative。
• 在#slideshow-prevnext .left和#slideshow-prevnext .right上移除float: left并添加position: absolute。
• 点击#slideshow-prevnext .left添加right: 29px和top: 0。
• 点击#slideshow-prevnext .right添加right: 0和top: 0。
• 点击#slideshow-prevnext a.dot添加float: left。

完成后看起来像这样：