0
現在我知道這可能是超級簡單，容易和明顯，但我已經敲了我的腦袋兩天試圖找出結果。 Google風起雲涌。在引導中對齊兩行內的列表
我想對齊頁面底部的兩個列表中的鏈接來製作導航欄。我使用bootstrap和字體真棒圖標。看起來好像字體真棒圖標比我使用的字體更大，導致錯位。
你可以在這裏看到我的問題通過codepen（其最顯着的以全屏模式或通過移動設備）：
<http://codepen.io/alexwilson/pen/mAJqWX?editors=1100>
這裏的HTML：
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="https://use.fontawesome.com/383177a704.js"></script>
<title>Alex Wilson - Man, Web Designer, Legend</title>
</head>
<body>
<div class="container-fluid">
<div class="row headline">
</div>
<div class="row">
<ul id="list-left">
<li><a href="Home.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="work.html">Work</a></li>
</ul>
<ul id="list-right">
<li><a href="https://www.linkedin.com/in/alexwilson33"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="https://github.com/AWilso30"><i class="fa fa-github" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com/XZISTTT"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="https://www.facebook.com/djcastaway"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="email.com"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS：
body,
html,
.container-fluid {
height: 100%;
width: 100%;
margin: 0px !important;
padding: 0px !important;
}
.headline {
height: 94%;
background: url(http://www.desktopimages.org/pictures/2014/1025/1/orig_58711.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.row {
margin-right: 0px !important;
}
.row a {
color: black;
}
.row a:link {
text-decoration: none;
}
.row a:visited {
text-decoration: none;
}
.row a:hover {
text-decoration: none;
color: gray;
}
.row a:active {
text-decoration: none;
}
.row ul {
text-align: center;
display: inline-block;
}
.row li {
display: inline-block;
}
#list-left {
font-size: 3vh;
display: inline-block;
width: 49%;
margin: 0;
padding: 0;
}
#list-right {
font-size: 3vh;
display: inline-block;
width: 49%;
margin: 0;
padding: 0;
}
在我試圖創建的底部導航欄中，它看起來像右側的圖標放置得比文字鏈接在左邊。
請記住，我希望一切都是響應這就是爲什麼我已經設置字體大小爲vh。
有沒有人有一個想法，我可以如何使左側的鏈接與正確的圖標垂直對齊？
我試過設置字體大小爲圖標比左側的鏈接，我已經嘗試在bootstrap中創建兩列xs-6，我試着用填充和邊緣爲divs和ul的自己和更多。到目前爲止沒有任何工作正確。
在此先感謝您的幫助。
你嘗試垂直對齊：頂部？ – user1725382
你應該在問題本身包含相關的代碼，提供一個codepen是好的，但不夠。 – vals
好的。我已經包含了代碼。感謝您的提升。 –