CSS Float left question_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-12 00:02 出处：网络

The following code is injected into the page via jQuery.I can\'t change that, but I can change the css:

相关专题：css css-float

The following code is injected into the page via jQuery. I can't change that, but I can change the 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>

I want the three

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

appear on the left of and the two ("Prev" and "Next") on the right.

How can I do it? I tried float:left but does not work.

Edit: C开发者_运维知识库SS is too long to post. Development site is here at : http://site2.ewart.library.ubc.ca/

The most basic answer:

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

In addition, it looks like the stylesheet '/profiles/ubc_clf/themes/logie/style.css' line 37 is trumping your 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;
  }

If that is to be on the right, it will need to read:

 float: right;

In order to accomplish this, you'll need to provide a CSS style which is more specific than the #slideshow-next .left rule. For example, place this in the page <head> tag:

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

Because the <style> tag on the page has a higher precedence than those loaded before it, the rule should override the float value.

I'm not particularly happy with this way of doing things - ideally you should just change the Javascript.

On #slideshow-prevnext add position: relative.
On #slideshow-prevnext .left and #slideshow-prevnext .right remove float: left and add position: absolute.
On #slideshow-prevnext .left add right: 29px and top: 0.
On #slideshow-prevnext .right add right: 0 and top: 0.
On #slideshow-prevnext a.dot add float: left.

It looks like this when you're done:

CSS Float left question

you can do it by this example.

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

i have used Inline Css. You can do it by classes or external Css also.

Without seeing your CSS it makes it hard to guess how you have this working.

Assuming left and right are css classes for floating left/right, just remove them and move the links down like so:

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

You'll have to post your CSS if you want a better example.