Question

这两张描述问题的照片这是描述问题的两张照片这是描述问题的两张照片

我希望图标这样定位

我用过

vertical-align: top;
line-height: 33px;

但是它不起作用，这是完整的代码 https://jsfiddle.net/8aho9sw5/

.nav3 ul{
    background: rgb(231, 125, 125);
    display:flex;
    width: 800px;
    margin:0 auto;
    margin-bottom: 6rem;
    padding:0;
    justify-content: space-around;


    
}

.nav3 ul li{
    list-style: none;
    width: 100%;


}

.nav3 ul li a{
    border: 3px solid rgb(25, 0, 255);
    display: block;

    text-align: center;
    text-decoration: none;
    font-size: 22pt;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-right: 2rem;
    padding-left: 2rem;

}



.nav3 ul li a:hover{
    background: rgb(95, 155, 125);
}

.home-icon:before{
    vertical-align: top;
    line-height: 33px;

    border: 3px solid rgb(0, 255, 13);
    content: "\f055";
    font-family: FontAwesome;
    
}

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Flexbox Menu Demos</title>
    <meta
      name="description"
      content="Various flexible box menu demos from Morten Rand-Hendriksen, staff author at lynda.com"
    />

    <link rel="stylesheet" href="test.css" type="text/css" media="all" />
    <link
      rel="stylesheet"
      href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
    />
  </head>

  <body>

    <nav class="nav3">
            <ul>
              <li><a href=""><span class="home-icon"></span>home</a></li>
              <li><a href="">contact</a></li>
              <li><a href="">about</a></li>
              <li><a href="">food</a></li>
            </ul>
          </nav>
      

  </body>
</html>

Answer 1

我不太了解您到底想要什么。但是我想这个链接将帮助您实现所需的功能。如果要在flexbox顶部对齐项目，可以使用

nav-item {
    align-items: flex-start
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您期望这样吗？

.nav3 ul {
  background: rgb(231, 125, 125);
  display: flex;
  width: 800px;
  margin: 0 auto;
  margin-bottom: 6rem;
  padding: 0;
  justify-content: space-around;
}
.nav3 ul li {
  list-style: none;
  width: 100%;
  border: 3px solid rgb(25, 0, 255);
}
.nav3 ul li a {
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
  font-size: 22pt;
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-right: 2rem;
  padding-left: 2rem;
}
.nav3 ul li a:hover {
  background: rgb(95, 155, 125);
}
.home-icon:before {
  vertical-align: top;
  line-height: 33px;
  border: 3px solid rgb(0, 255, 13);
  content: "\f055";
  font-family: FontAwesome;
}
span {
  margin-left: -75%;
}

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Flexbox Menu Demos</title>
  <meta name="description" content="Various flexible box menu demos from Morten Rand-Hendriksen, staff author at lynda.com" />
  <link rel="stylesheet" href="test.css" type="text/css" media="all" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
</head>
<body>
  <nav class="nav3">
    <ul>
      <li><a href="">home<span class="home-icon"></span></a></li>
      <li><a href="">contact</a></li>
      <li><a href="">about</a></li>
      <li><a href="">food</a></li>
    </ul>
  </nav>
</body>
</html>

Answer 3

有几种方法可以做到这一点。最简单的方法是将:before置于绝对位置，并将top位置设置为所需的任何距离。（绝对定位的元素不会调整其父对象的高度/宽度）。请记住，您需要将父级设置为position: relative，以便基于该位置。

.nav3 ul{
    background: rgb(231, 125, 125);
    display:flex;
    width: 800px;
    margin:0 auto;
    margin-bottom: 6rem;
    padding:0;
    justify-content: space-around;


    
}

.nav3 ul li{
    list-style: none;
    width: 100%;


}

.nav3 ul li a{
    border: 3px solid rgb(25, 0, 255);
    display: block;

    text-align: center;
    text-decoration: none;
    font-size: 22pt;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-right: 2rem;
    padding-left: 2rem;

}



.nav3 ul li a:hover{
    background: rgb(95, 155, 125);
}

.home-icon {
  position: relative;
  display:inline-block;
  min-width: 60px;
}

.home-icon:before{
    border: 3px solid rgb(0, 255, 13);
    content: "\f055";
    font-family: FontAwesome;
    position: absolute;
    top: 10px;   
}

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Flexbox Menu Demos</title>
    <meta
      name="description"
      content="Various flexible box menu demos from Morten Rand-Hendriksen, staff author at lynda.com"
    />

    <link rel="stylesheet" href="test.css" type="text/css" media="all" />
    <link
      rel="stylesheet"
      href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
    />
  </head>

  <body>

    <nav class="nav3">
            <ul>
              <li><a href=""><span class="home-icon"></span>home</a></li>
              <li><a href="">contact</a></li>
              <li><a href="">about</a></li>
              <li><a href="">food</a></li>
            </ul>
          </nav>
      

  </body>
</html>

使用CSS定位fontawesome图标

3 个答案: