图标正在移出锚标记

时间：2018-02-06 05:33:00

标签： html css html5 css3

＆＃13;
＆＃13; 
#branding h1 {
  float: left;
  display: inline-block;
}

nav {
  float: right;
}

nav ul li {
  display: inline-block;
  list-style-type: none;
  margin: 10px;
}

nav ul li a {
  text-decoration: none;
  position: relative;
  top: 5px;
  border: 2px solid red;
  padding: 10px;
  color: black;
}

.hom {
  background-color: red;
  color: white;
}

nav ul li a:hover {
  background-color: red;
  color: white;
}

a:active {
  background-color: blue;
  color: white;
}

a.log {
  background-color: red;
  color: white;
  border-radius: 5px;
  margin: 5px;
  position: relative;
  width: auto;
}

a img {
  display: inline-block;
  top: 17px;
  position: relative;
  float: right;
}
＆＃13; 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
  <div class="container">
    <div id="branding">
      <h1> Web Design </h1>
    </div>
    <nav>
      <ul>
        <li><a href="#" class="hom">Home</a></li>
        <li><a href="https://www.google.com" target="blank">About</a></li>
        <li><a href="#">Contact Us</a></li>
        <li>
          <a href="#" class="log">
            <img src="log.png" style="width:30px; height:20px;"> Log In</a>
        </li>
      </ul>
    </nav>
  </div>
</header>
＆＃13;
＆＃13;
＆＃13;

在链接中，我试图通过使用图片标记来放置登录图标但不知何故它正在移出链接，我只是想将图标保留在登录文本中但是之后将它浮动到*右*，它正在流出。 Output Screenshot

那么我需要使用bootstrap还是我们可以使用纯CSS实现预期的输出

5 个答案:

答案 0 :(得分：1)

问题是您在float:right标记中使用了<img>，它将图片从父流中删除。请删除float:right并反转您的HTML标记（ icon将在文本之后）。

当你使用font-awesome时......不需要在这里使用图像....使用

<i class="fa fa-sign-out"></i>

Stack Snippet 

#branding h1 {
  float: left;
  display: inline-block;
}

nav {
  float: right;
}

nav ul li {
  display: inline-block;
  list-style-type: none;
  margin: 10px;
}

nav ul li a {
  text-decoration: none;
  position: relative;
  border: 2px solid red;
  padding: 10px;
  color: black;
  display: block;
}

.hom {
  background-color: red;
  color: white;
}

nav ul li a:hover {
  background-color: red;
  color: white;
}

a:active {
  background-color: blue;
  color: white;
}

a.log {
  background-color: red;
  color: white;
  border-radius: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
  <div class="container">
    <div id="branding">
      <h1> Web Design </h1>
    </div>
    <nav>
      <ul>
        <li><a href="#" class="hom">Home</a></li>
        <li><a href="https://www.google.com" target="blank">About</a></li>
        <li><a href="#">Contact Us</a></li>
        <li>
          <a href="#" class="log">Log In <i class="fa fa-sign-out"></i></a>
        </li>
      </ul>
    </nav>
  </div>
</header>

答案 1 :(得分：0)

你可以试试这个。

#branding h1{
  float:left;
  display:inline-block;
}
nav{
  float:right;
}
nav ul li{
  display:inline-block;
  list-style-type: none;
  margin:10px;
}

nav ul li a{
  text-decoration:none;
  position:relative;
  top:5px;
  border:2px solid red;
  padding:10px;
  color:black;

}
.hom{
  background-color:red;
  color:white;
}   
nav ul li a:hover{
  background-color: red;
  color:white;
}
a:active{
  background-color: blue;
  color:white;
}

a.log{

  background-color:red;
  color:white;
  border-radius:5px;
  margin:5px;
  position:relative;
  width:auto;
}
<!DOCTYPE html>
<html>
    <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <meta name="viewport" content="width=device-width">
      <meta name="description" content="web design affordable">
      <meta charset="utf-8">
      <title></title>
      <style>

    </style>
  </head>
  <body>
    <header>
      <div class="container">
        <div id="branding">
          <h1> Web Design </h1>
        </div>
        <nav>
          <ul>
            <li><a href="#" class="hom">Home</a></li>
            <li><a href="https://www.google.com"target="blank">About</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#" class="log">
              Log In<img src="log.png" style="width:30px;height:20px;position: relative;top: 5px;margin-left: 10px;"></a></li>
            </ul>
          </nav>
        </div>
      </header>
    </body>
    </html>

答案 2 :(得分：0)

对你有帮助

#branding h1{
  float:left;
  display:inline-block;
}
nav{
  float:right;
}
nav ul li{
  display:inline-block;
  list-style-type: none;
  margin:10px;
}

nav ul li a{
  text-decoration:none;
  position:relative;
  top:5px;
  border:2px solid red;
  padding:10px;
  color:black;

}
.hom{
  background-color:red;
  color:white;
}   
nav ul li a:hover{
  background-color: red;
  color:white;
}
a:active{
  background-color: blue;
  color:white;
}

a.log{

  background-color:red;
  color:white;
  border-radius:5px;
  margin:5px;
  position:relative;
  width:auto;



}
a img{
  display:inline-block;
  top:17px;
  position:relative;
  float:right;
}
<!DOCTYPE html>
<html>
    <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <meta name="viewport" content="width=device-width">
      <meta name="description" content="web design affordable">
      <meta charset="utf-8">
      <title></title>
      <style>

    </style>
  </head>
  <body>
    <header>
      <div class="container">
        <div id="branding">
          <h1> Web Design </h1>
        </div>
        <nav>
          <ul>
            <li><a href="#" class="hom">Home</a></li>
            <li><a href="https://www.google.com"target="blank">About</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#" class="log" style="display:inline-block">
              <img src="log.png" style="width:30px; height:20px;top: 0px; 
   margin-left: 5px;"> Log In</a></li>
            </ul>
          </nav>
        </div>
      </header>
    </body>
    </html>

答案 3 :(得分：0)

只需删除此

即可 
a img {
display: inline-block;
top: 17px;
position: relative;
float: right;
}

试试这个working link。 如果你想将图像用作按钮图标。

答案 4 :(得分：0)

试试这个

#branding h1 {
  float: left;
  display: inline-block;
}

nav {
  float: right;
}

nav ul li {
  display: inline-block;
  list-style-type: none;
  margin: 10px;
}

nav ul li a {
  text-decoration: none;
  position: relative;
  top: 5px;
  border: 2px solid red;
  padding: 10px;
  color: black;
}

.hom {
  background-color: red;
  color: white;
}

nav ul li a:hover {
  background-color: red;
  color: white;
}

a:active {
  background-color: blue;
  color: white;
}

a.log {
  background-color: red;
  color: white;
  border-radius: 5px;
  margin: 5px;
  position: relative;
  width: auto;
  display: block;
}

a img {
  display: inline-block;
  top: 0;
  position: relative;
  float: right;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
  <div class="container">
    <div id="branding">
      <h1> Web Design </h1>
    </div>
    <nav>
      <ul>
        <li><a href="#" class="hom">Home</a></li>
        <li><a href="https://www.google.com" target="blank">About</a></li>
        <li><a href="#">Contact Us</a></li>
        <li>
          <a href="#" class="log">
            <img src="log.png" style="width:30px; height:20px;"> Log In</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

相关问题
最新问题