簡單的CSS浮動問題

我有一個圖像在文本下而不是旁邊的簡單問題。簡單的CSS浮動問題

標記是這樣的：

<div class="footer"> 
    <p>bla bla bla bla</p> 
    <a href="url_here" class="next" title="Next"><span>Next</span></a> 
</div>

CSS是這樣的：

div.footer p { 
    color: #FFF; 
    width: 80%; 
    margin: 0 auto; 
    padding:0; 
    border: 1px solid white; 
} 
div.footer a.next { 
    background-repeat:no-repeat; 
    display: block; 
    float: left; 
    margin-left: 2em; 
    height: 52px; 
    width: 24px; 
    background-image: url('../gfx/arrow-right.jpg'); 
    margin-left: .7em; 
} 
div.footer a.next span { 
    display: none; 
}

段落似乎要推它下面的鏈接，而不是漂浮在它旁邊的自由空間。有任何想法嗎？ <p>只有80％寬，所以它有很多空間來顯示鏈接。

乾杯

來源

2010-06-01 Cory Dee

我來這裏尋找一個簡單的浮點算術問題，所以我澄清了你的標題。 ;） – 2010-06-01 13:29:54

乾杯，謝謝澄清。 – 2010-06-01 13:47:37

段落是塊級元素，將迫使自己是在最後一個元素之後新行，並迫使下一個元素是一個新行。

如果你想要左邊的鏈接（你有一個浮動：留在錨點上）嘗試將該段落向右移動。

嘗試

div.footer p{ 
    ... 
    float:right; 
}

看到http://jsfiddle.net/2PXt6/1/

，如果你想錨浮到段落的右邊，移動錨點是款之前，把一個float：正確的駐定標籤。

編輯：要對右錨先在HTML有錨和浮動：右看 http://jsfiddle.net/2PXt6/4/

，如果你不想改變HTML，浮動段落的左邊和錨定在左側。請參閱http://jsfiddle.net/2PXt6/5/

來源

2010-06-01 13:29:09

您所描述的內容聽起來像是「p」標籤的正確行爲。見here。如果你不想要下面的鏈接，爲什麼你不使用「div」而不是「p」標籤？您應該能夠將所有樣式轉移到新的div。

更新：我認爲下面的HTML會做你在說什麼。爲了簡單起見，我使用內聯樣式，您需要將這些樣式移動到您的css文件中。

<div class="footer"> 
    <div style="float:left">bla bla bla bla</div> 
    <a href="url_here" style="float:right" class="next" title="Next">Next</a> 
</div>

來源

2010-06-01 13:32:55

這似乎是最接近我想要的東西，但是，這仍然留下鏈接包裝。目的是讓它浮動到其可用空間的左側，作爲div /段的右邊緣。 – 2010-06-01 13:40:49

其實，我這樣做：

div.footer p { 
    float: left; 
    ... 
}

來源

2010-06-01 13:33:07 Kurucu

p是一個塊級元素，所以除非你浮起來，事以後這將是它的下面。

您可以浮動段落或將鏈接放在html之前。

來源

2010-06-01 13:33:25 jeroen

簡單的CSS浮動問題

回答

相關問題