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>

появлялись слева от двух ("Prev" и "Далее ") справа.

Как я могу это сделать?Я пробовал 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;

Для этого вам нужно будет предоставить стиль CSS, который является более конкретным, чем# slideshow-next .left rule.Например, поместите это в тег страницы:

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

Поскольку тег

Answer 2

Я не особенно доволен этим способом - в идеале вам следует просто изменить 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.

Когда вы закончите, это будет выглядеть так:

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

вы можете сделать это на этом примере.

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