CSS Float 左问题

Question

以下代码通过jQuery 注入(inject)到页面中。我无法更改它，但我可以更改 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>

出现在左边，两个(“Prev”和“Next”)出现在右边。

我该怎么做？我尝试了 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 行胜过您的 float :

  #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 样式。例如，将其放在页面 标记中:

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

因为页面上的 <style> 标签比之前加载的标签有更高的优先级，规则应该覆盖浮点值。