CSS Float左側問題

以下代碼通過jQuery注入到頁面中。我不能改變的，但我可以改變的CSS：CSS Float左側問題

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

來源

2011-02-17 Minghui Yu

不是我下的投票，但是你問了一個問題，CSS不提供您目前使用的CSS。請在[jsFiddle]（http://jsfiddle.net）上進行演示。 – thirtydot 2011-02-17 22:58:38

這是相當長的。上面的代碼只是一個代碼片段。工作頁面位於：http://site2.ewart.library.ubc.ca。在主頁上，旋轉木馬的正下方，prev和next按鈕應該在右邊，而三個點應該在左邊。 – 2011-02-17 23:01:42

我對這種做事方式並不特別滿意 - 理想情況下，您應該更改Javascript。

對#slideshow-prevnext加position: relative。
對#slideshow-prevnext .left和#slideshow-prevnext .right刪除float: left並添加position: absolute。
對#slideshow-prevnext .left加right: 29px和top: 0。
On #slideshow-prevnext .right add right: 0 and top: 0。
對#slideshow-prevnext a.dot加float: left。

它看起來像這樣當你做：

winner

來源

2011-02-17 23:22:35 thirtydot

你可以通過這個例子來做到這一點。

<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來完成。

來源

2011-02-17 23:00:15 GitsD

最基本的答案：

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;

爲了做到這一點，你會東東d提供比＃slideshow-next .left規則更具體的CSS樣式。

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

因爲頁面上的<風格>標籤具有比之前加載更高的優先級，規則應該重寫浮點值，例如：>標籤將本頁面<頭。

來源

2011-02-17 23:01:16

歡迎來到StackOverflow！發佈代碼時請使用代碼按鈕（花括號）。只需突出顯示您的代碼並單擊按鈕即可。您還可以在文本輸入區域下方看到您的答案預覽。給[this]（http://stackoverflow.com/editing-help）一個閱讀。它也可以從？按鈕在編輯/回覆頁面中。 – 2011-02-17 23:10:41

@drackir Mea culpa。試圖一次做太多事情=糟糕的職位。 :) – 2011-02-17 23:17:55

沒有看到你的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。

來源

2011-02-17 23:01:40

CSS Float左側問題

回答

相關問題