浮動兩個列表彼此之上？

-1

讓圖像浮動到左側，兩個無序列表向右浮動。由於某些原因，列表並排浮動，而不是彼此重疊。我不能讓列表2浮動浮動1下。浮動兩個列表彼此之上？

有沒有人有任何想法？

<div class="container"> 

     <img src="yogapic1.png"/> 

     <ul class="list-1"> 
      <li><a href="">Home</a></li> 
      <li><a href="">Influences</a></li> 
      <li><a href="">About Me</a></li> 
      <li><a href="">Classes</a></li> 
      <li><a href="">Andrews Video Blog</a></li> 
      <li><a href="">Photography</a></li> 
     </ul> 

     <ul class-"list-2"> 
      <li><a href="">Find Us</a></li> 
      <li><a href="">Contact</a></li> 
      <li><a href="">Facebook</a></li> 
     </ul> 


    </div><!--container--> 


.container { 

max-width: 1075px; 
margin: auto; 

} 

.container img { 

float: left; 

} 

.list-1 { 
    float: right; 



} 

.list-2 { 
    float: right; 

}

來源

2013-05-10 seanki

你在名單2上有一個錯字（-而不是=）。如果您還添加clear:right;的名單應該做你想要什麼：

例子：http://jsfiddle.net/nkYun/

來源

2013-05-10 13:24:39 Maloric

完美的謝謝你！上帝該死的錯字！ – seanki 2013-05-10 13:30:24

發生在我們身上;） – Maloric 2013-05-10 13:33:19

<-----打勾，我需要我的修復 – Maloric 2013-05-10 13:35:04

-1

如果您將list-2浮動到右側並且clear：right也應該起作用。像：

list-2 { 
     float: right; 
     clear: right; 
}

來源

2013-05-10 13:23:05 falky

裹在一個div元素的兩個列表和浮空，而不是正確的。

通過單獨浮動兩個列表，您將它們從文檔的正常流程中取出，因此它們不再強制元素出現在它們的下面。

來源

2013-05-10 13:23:56 ChrisPatrick

.list-2 { 
    float: right; 
    clear: right; 
}

float: right意願，如果有足夠的空間，把元素已漂浮到右邊的任何其他元素的左側。要覆蓋該行爲並確保它將低於最新的float:right元素，您需要使用clear:right。

來源

2013-05-10 13:24:38 Gareth

-1

嘗試分配寬度到您的列表：

.list-1 { 
    float: right; 
    width:100%; 
} 
.list-2 { 
    float: right; 
    width:100%; 
}

編輯

如果您正在給這兩個列表相同的CSS，嘗試這樣的事情

.container ul{ 
    float:left; 
    width:100%; 
}

來源

2013-05-10 13:24:52

漂浮在彼此你簡單需要3步驟的頂兩個列表：

容器應當具有的位置相對position:relative
其中2所列出的應該是浮動例如向右float:right
第二個列表應該有絕對位置position:absolute和它的右邊是0像素，使其從右邊開始，併成爲第一個列表

來源

2013-05-10 13:40:53

這裏是一個上替代方法。有時候試圖找出應該浮動的東西，或者應該浮動的東西可能會讓代碼混淆。但是如果你對你想要浮動的元素有一個大致的瞭解（也許稍後你會決定增加更多的內容），然後在父容器中包含項目（在我們的例子中是一個帶有css的div元素稱爲列表的類），然後將整個父類放在想要的位置。這是一個例子...

的CSS：

.container { 
max-width: 1075px; 
margin: auto; 
} 
.container img { 
float: left; 
} 

.lists { 
    float: right; 
    border:solid 1px pink; 
}

的HTML：

<div class="container"> 

     <img src="yogapic1.png"/> 

     <div class="lists"> 
     <ul class="list-1"> 
      <li><a href="">Home</a></li> 
      <li><a href="">Influences</a></li> 
      <li><a href="">About Me</a></li> 
      <li><a href="">Classes</a></li> 
      <li><a href="">Andrews Video Blog</a></li> 
      <li><a href="">Photography</a></li> 
     </ul> 

     <ul class-"list-2"> 
      <li><a href="">Find Us</a></li> 
      <li><a href="">Contact</a></li> 
      <li><a href="">Facebook</a></li> 
     </ul> 
     </div> 


    </div><!--container-->

而且my fiddle

注意過這種方法，你不再離開花車訂購您列出的頭痛，但現在，在這個父容器中，您可以簡單地進入您的HTML代碼並按照您希望的順序排列列表。

享受！

來源

2013-05-10 13:48:32 blackhawk

浮動兩個列表彼此之上？

回答

相關問題