Question

现在我知道这可能是超级简单，容易和明显的，但我已经敲了两天试图弄明白这一点。用谷歌搜索风暴。

我尝试将页面底部两个列表中的链接对齐以制作导航栏。我使用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的原因。

有没有人知道如何让左侧链接与右侧图标垂直对齐？

我尝试将图标的字体大小设置为小于左侧链接的字体大小，我尝试在引导程序中创建两列xs-6，我尝试过使用填充和div的余量以及ul本身等等。到目前为止，没有任何工作正常。

提前感谢您的帮助。

Answer 1

你走了。我抛出一些不必要的东西，希望这会有所帮助。

/*<!-- 
nest all nav?? 
color nav and links
make nav and links larger
make bg image slightly smaller
crop top of bg image to fit bottom
add padding to bg image
new font
larger nav
-->*/

body {
  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:0 !important;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 6vh;
  width: 100%;
  background: white;
}
.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,
#list-right {
  font-size: 3vh;
  line-height: 6vh;
  display: inline-block;
  width: 49%;
  margin: 0;
  padding: 0;
}

<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="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>
</body>

</html>

在引导程序中对齐一行中的两个列表

1 个答案: