試圖使按鈕浮動到左側和右側

我希望此代碼類似谷歌的主頁的底部。它仍然垂直列出，即使是「內聯」。我希望每個三個「列表」在屏幕的左側和右側彼此水平相鄰。試圖使按鈕浮動到左側和右側

#HTML 
<footer> 
<div class="footer"> 
<ul style="width:10%; float:left;list-style-type:none;"> 
     <li>Advertising</li> 
     <li>Business</li> 
     <li>About</li> 
    </ul> 

    <ul style="width:10%; float:right;list-style-type:none;"> 
     <li>Privacy</li> 
     <li>Terms</li> 
     <li>Settings</li> 
    </ul> 
</div> 
</footer> 

#CSS 

.footer li{ 
    display:inline; 
}

來源

2017-07-03 Jacob Moore

您應該刪除您的ul s的寬度。見this codepen。浮動元素將佔用他們所有孩子的寬度。通過將它們包裝在佔10％寬度的元素中，它們沒有足夠的空間留在同一行上。

來源

2017-07-03 21:29:14 Cyrille

三江源奏效。任何想法如何使它們都移動到頁面的最底部？ –

查看此代碼頁，查看頁腳底部的示例：https：//codepen.io/JesmoDrazik/pen/jPqjgR – Cyrille

你可以在.footer DIV使用display: flex;，與設置，如下

.footer ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 
.footer li { 
 
    display: inline-block; 
 
} 
 
.footer { 
 
    display: flex; 
 
    justify-content: space-between; 
 
}

<footer> 
 
    <div class="footer"> 
 
    <ul> 
 
     <li>Advertising</li> 
 
     <li>Business</li> 
 
     <li>About</li> 
 
    </ul> 
 

 
    <ul> 
 
     <li>Privacy</li> 
 
     <li>Terms</li> 
 
     <li>Settings</li> 
 
    </ul> 
 
    </div> 
 
</footer>

來源

2017-07-03 21:33:52 Johannes

試圖使按鈕浮動到左側和右側

回答

相關問題