我不明白爲什麼這兩個元素沒有並排排列？

我想要使用相對位置值將這兩個元素並排完全對齊。我很難理解爲什麼這兩個元素不想對齊。我不明白爲什麼這兩個元素沒有並排排列？

有人可以解釋我做錯了什麼嗎？如果可能的話找到解決方案？

https://jsfiddle.net/kerberonix/qcq68gfg/

HTML

<html> 
    <body> 
    <footer> 
     <div class="test"> 
     <p>Footer Text</p> 
     </div> 
     <ul class="social-links"> 
     <li>Link 1</li> 
     <li>Link 2</li> 
     </ul> 
    </footer> 
    </body>

CSS

footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 70px; 
    padding: 0 20px; 
    background-color: #262626; 
} 

.test { 
    position: relative; 
    display: inline-block; 
    top: 50%; 
    width: 50%; 
    transform: translateY(-50%); 
} 

footer p { 
    font-size: 100%; 
    color: #888; 
} 

.social-links { 
    position: relative; 
    display: inline-block; 
    top: 50%; 
    width: 50%; 
    transform: translateY(-50%); 
} 

.social-links li { 
    display: inline-block; 
    margin-right: 35px; 
    text-decoration: none; 
} 

.social-links li:last-child { 
    margin: 0; 
}

來源

2017-06-05 kerberonix

代碼這就是你」重新去？ https://jsfiddle.net/qcq68gfg/6/ –

我試圖讓它與「頁腳文本」在右側完全相同的位置垂直對齊。 – kerberonix

是這樣的：|頁腳文本_______________鏈接1鏈接2 | – kerberonix

我會刪除所有的文本和社交元素的定位，並在父用display: flex; align-items: center;。

footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 70px; 
 
    padding: 0 20px; 
 
    background-color: #262626; 
 
    display: flex; 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    left: 0; right: 0; 
 
} 
 

 
.test { 
 
    position: relative; 
 
} 
 

 
footer p { 
 
    font-size: 100%; 
 
    color: #888; 
 
} 
 

 

 
/*-------------------------------------------------------------------------------------------- 
 
SOCIAL LINKS 
 
--------------------------------------------------------------------------------------------*/ 
 

 
.social-links { 
 
    position: relative; 
 
    color: white; 
 
    text-align: right; 
 
    padding: 0; 
 
} 
 

 
.test, .social-links { 
 
    flex: 1 0 0; 
 
} 
 

 
.social-links li { 
 
    display: inline-block; 
 
    margin-left: 35px; 
 
    text-decoration: none; 
 
} 
 

 
.social-links li:last-child { 
 
    margin: 0; 
 
}

<html> 
 

 
    <body> 
 
    <footer> 
 
     <div class="test"> 
 
     <p>Footer Text</p> 
 
     </div> 
 
     <ul class="social-links"> 
 
     <li>Link 1</li> 
 
     <li>Link 2</li> 
 
     </ul> 
 
    </footer> 
 
    </body> 
 

 
</html>

來源

2017-06-05 00:36:06

謝謝。你知道一種使用這種方法獲得'鏈接1'和'鏈接2'完全對齊到右側的方法嗎？ – kerberonix

類似（使用'_'來表示空格）：|頁腳文本__________________鏈接1鏈接2 | – kerberonix

@kerberonix肯定，更新了我的答案 –

使用position: absolute的兩個元素，並考慮所造成的頁腳的填充寬度和位置額外20像素。另外不要忘記重置ul的填充。看到代碼在我的片段的詳細信息：

html, 
 
body { 
 
    margin: 0; 
 
} 
 

 
footer { 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 70px; 
 
    padding: 0 20px; 
 
    background-color: #262626; 
 
} 
 

 
.test { 
 
    position: absolute; 
 
    display: inline-block; 
 
    top: 50%; 
 
    width: calc(50% - 20px); 
 
    transform: translateY(-50%); 
 
} 
 

 
footer p { 
 
    font-size: 100%; 
 
    color: #888; 
 
} 
 

 
.social-links { 
 
    position: absolute; 
 
    left: calc(50% - 20px); 
 
    top: 50%; 
 
    width: calc(50% - 20px); 
 
    transform: translateY(-50%); 
 
    text-align: right; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.social-links ul {} 
 

 
.social-links li { 
 
    display: inline-block; 
 
    margin-right: 35px; 
 
    text-decoration: none; 
 
} 
 

 
.social-links li:last-child { 
 
    margin: 0; 
 
}

<footer> 
 
    <div class="test"> 
 
    <p>Footer Text</p> 
 
    </div> 
 
    <ul class="social-links"> 
 
    <li>Link 1</li> 
 
    <li>Link 2</li> 
 
    </ul> 
 
</footer>

來源

2017-06-05 00:37:31 Johannes

現在，它的好吧，我想你得到什麼，你只需要更換以s social links

footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 70px; 
    padding: 0 20px; 
    background-color: #262626; 
} 

.test { 
    position: relative; 
    display: inline-block; 
    top: 50%; 
    width: 50%; 
    transform: translateY(-50%); 
} 

footer p { 
    font-size: 100%; 
    color: #888; 
} 

/*-------------------------------------------------------------------------------------------- 
SOCIAL LINKS 
--------------------------------------------------------------------------------------------*/ 

.social-links { 
    position: relative; 
    display: inline-block; 
    top: 50%; 
    width: 50%; 
    transform: translateY(-50%); 
    text-align: right; 
} 

.social-links li { 
    top 150px; 
    height:20px; 
    width: 250px; 
    position: relative; 
    left: calc(50% – 125px); 

} 

.social-links li:last-child { 
    margin: 0; 
}

來源

2017-06-05 01:03:52

我不明白爲什麼這兩個元素沒有並排排列？

回答

相關問題