为什么 FA 图标和 A 不在同一行中

我是html和css的首次亮相。我只是想使用 html 和 css 创建我的第一个网站，但在navbar我发现我无法在同一行中制作<a>和fa图标，有什么解决方案吗？

这是代码：

   body{
        margin: 0;
        padding: 0
    }
    nav{
        background-color: purple;
        height: 55px;
        padding-top: 25px;
    }
    
    nav a{
       text-decoration: none;
        color:white;
        margin-top:30px;
        font-size: 20px;
        margin-left: 10px
    
    }
    
    nav span{
        color: white;
        font-size: 15px
    }
    
    .fa{
        float: right;
        display: inline
    }

<html>
        
    <head>
    <title> Web page </title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    
    </head>
    <body> 
    <!-- Navbar -->
    <nav>
        <a href="">Acceuil</a> <span> | </span>
        <a href="">Types d'appareils</a> <span> | </span>
        <a href="">Ordinateurs</a> <span> | </span>
        <a href="">Telephones</a> <span> | </span>
        <a href="">O.S</a> <span> | </span>
        <a href="">Etudes</a> 
    
    <a href="#" class="fa fa-facebook"></a>
    
     
    </nav><!-- End of Navbar -->
        
    
    </body>
    </html>

代码笔：

https://codepen.io/badis-kerdellou/pen/KKKYELJ

提前致谢

从.fa中删除float: right并添加display: inline !important; 。

如果需要，您也可以申请padding-left。请参阅下面的片段：

body{
        margin: 0;
        padding: 0
    }
    nav{
        background-color: purple;
        height: 55px;
        padding-top: 25px;
    }
    
    nav a{
       text-decoration: none;
        color:white;
        margin-top:30px;
        font-size: 20px;
        margin-left: 10px;    
    }
    
    nav span{
        color: white;
        font-size: 15px;
    }
    
    .fa{
        /* updated here */  
        display: inline !important;
    }

<html>
        
    <head>
      <title> Web page </title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body> 
    <!-- Navbar -->
    <nav>
        <a href="">Acceuil</a> <span> | </span>
        <a href="">Types d'appareils</a> <span> | </span>
        <a href="">Ordinateurs</a> <span> | </span>
        <a href="">Telephones</a> <span> | </span>
        <a href="">O.S</a> <span> | </span>
        <a href="">Etudes</a>     
        <a href="#" class="fa fa-facebook"></a>   
     
    </nav><!-- End of Navbar -->        
    
    </body>
    </html>

******

这是您更新的代码。

body{
    margin: 0;
    padding: 0
}
nav{
    background-color: purple;
    height: 55px;
    padding-top: 25px;
}
nav a{
    display: inline-block; /*added*/
    text-decoration: none;
    color:white;
    font-size: 20px;
    margin-left: 10px
   /*margin-top:30px;*/
}
nav span{
    color: white;
    font-size: 15px
}
.fa{
    float: right;
}

<html>
    
<head>
<title> Web page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body> 
<!-- Navbar -->
<nav>
    <a href="">Acceuil</a> <span> | </span>
    <a href="">Types d'appareils</a> <span> | </span>
    <a href="">Ordinateurs</a> <span> | </span>
    <a href="">Telephones</a> <span> | </span>
    <a href="">O.S</a> <span> | </span>
    <a href="">Etudes</a> 
<a href="#" class="fa fa-facebook"></a>
 
</nav><!-- End of Navbar -->
    
</body>
</html>

相关内容

最新更新

热门标签：