0
これはおそらく超シンプルで簡単で分かりやすいと知っていますが、私はこれを試してみるために2日間頭を叩いています。 Googleは嵐を突っ込んだ。ブートストラップの行内に2つのリストを整列させる
私は、ナビゲーションバーを作成するために、ページの下部にある2つのリスト内のリンクを整列しようとしています。私はブートストラップとフォントを使ってアイコンにすばらしいです。それは、フォントの素晴らしいアイコンが私が使用しているフォントと、ミスアライメントの原因となるフォントよりも大きいようです。
あなたが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に設定しているので、すべてが応答するようにしておきたいと思います。
誰かが、どのように左のリンクを右のアイコンと垂直に整列させることができるか考えていますか？
左のリンクよりもアイコンのフォントサイズを小さく設定しようとしましたが、ブートストラップでxs-6という2つの列を作ってみましたが、divの余白と余白ul自身やそれ以上。これまでのところ、何も正しく機能していません。
ご協力いただきありがとうございます。
あなたは垂直整列を試してみました：トップ？ – user1725382
質問コード自体に関連するコードを含める必要があります。コードが正しくありますが、十分ではありません。 – vals
Ok。私はコードを含めました。ヘッドアップをありがとう。 –