我不明白为什么这两个元素没有并排排列？

我想要使用相对位置值将这两个元素并排完全对齐。我很难理解为什么这两个元素不想对齐。我不明白为什么这两个元素没有并排排列？

有人可以解释我做错了什么吗？如果可能的话找到解决方案？

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

我不明白为什么这两个元素没有并排排列？

回答

相关问题