Question

伙计们我试图将主页PNG固定在导航栏的右侧，但我不知道为什么它不会粘在右边。它只停留在中间的某个地方。

我还声明了Float：对于href链接是正确的，但它没有给出期望的结果。我不知道故障在哪里，这就是我在这里发布整个编码的原因，以便我可以纠正错误。

请帮帮我!!!

＆＃13;

/*This is for links*/
a{text-decoration: none;
color: Black;}

div#sub{display: inline;
color: #339900;}

body {margin:0;}

/*This is for navigation*/
a#home{
  float:right;

}


.topnav {
  overflow: hidden;
  background-color: #4caf50;
}

.topnav a {

  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #666666;
  color: white;
}

.topnav a.active {
  background-color: white;
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }}
/*This is the end*/

/*This is for header*/
body {
  margin: 0;
  font-family: Arial;}

.top-container {
  background-color: white;
  padding: 0px;
  text-align: left;}

.content {
  padding-top: 14px;}

.header {
  padding: 0px 0px;
  background: #4caf50;
  color: #4caf50;
  z-index:100;}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;}

.sticky + .content {
  padding-top: 64px;}
/*This is the end*/

/*This is for footer*/
 .footer {
    background-color: #0b0c0c;
    padding: 10px;
    color: white;
    padding-top: 70px;
    padding-bottom: 100px;
    padding-left: 40px;}

 .footer_2{background-color: #1e1f21;
 padding-top: 20px;
 padding-bottom: 30px;
 color: white; }

 div#info{ color: #9fa1a3;}


 .copy_reg{float:right;
 display: inline-block;
 padding-right: 10px; }

 /*This is for media buttons*/
 .fa {
  padding: 6px;
  font-size: 5px;
  text-align: center;
  text-decoration: none;
  margin: 5px 5px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;}

 .media{font-size: 20px;
   padding-right: 60px;
   float: right;
   display: inline-block;}

＆＃13;

<!doctype>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <title>About Us</title>
 <link rel="stylesheet" href="letsavepet.css" type="text/css" />
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body style=background:white>

<img src="images/logo.png" width="200" height="200" hspace="30" />
<a href="donate.html"><img src="images/donate.png" width="300" height="100"  vspace="60" hspace="10" align="right" /> </a>

<div class="header" id="myHeader">
<div class="topnav" id="myTopnav">
  <a href="index.html">Home</a>
  <a href="news.html">News</a>
  <a href="gallery.html">Gallery</a>
  <a href="joinus.html">Join Us</a>
  <a href="donate.html">Donate</a>
  <a href="aboutus.html"  class="active">About Us</a>
  <a id="home" href="index.html">
<img src="images/Home-Button.png" width="20" height="20"/></a>
</div></div>

<div class="content">
<img src="images/stray.jpg" align="right" width="50%" height="70%" border="1" />
<p><font size="5px">Lets Save Pets is a non-profit organization that is dedicated to provide and care for homeless and abused animals. Lets Save Pets conducts activities to promote fund-raising activites and importance of saving pets among common people to help provide care and shelter to animals in need.
What makes Lets Save Pets different from other non-profit organizations is that we will provide not only food and help to homeless pets but we will also aim at giving them shelters and better living conditions.
We believe this is a much needed task to do because this will help in reducing road accidents, pollution and most importantly will reduce their number on roads and will help them in living a joyful life!
Founder, Suryansh Manav is a student of grade 10<sup>th</sup>. He started his mission on 18 June, 2017 with some of his friends. His passion for pets started when his family stopped him from having a pet.That is why he decided to start Lets Save Pets to save homeless animals and to gather other people like him.
All of the members are caring, and have a tremendous amount of love and passion for the love and caring for animals.
Lets Save Pets members are from different countries of the world like India, U.S.A, etc. and we are proud to have them with us!</font> </p>
</div>

<div class="footer">
<div class="media">FIND&nbsp;US&nbsp;ON<a href="https://www.facebook.com/letsavepet/" class="fa fa-facebook"></a></div>
CONTACT&nbsp;INFO<br /><br />
<div id="info"><i class="material-icons">local_phone</i> +91 7982189411<br /><br />
<i class="material-icons">local_post_office</i> letsavepet@gmail.com<br /><br />
<i class="material-icons">map</i> 1/5300-C, Street no.- 11,<br />
Balbir Nagar Ext., Shahdara,<br />
Delhi-110032, India</div>
</div>

<div class="footer_2">&nbsp;&nbsp; &copy; Letsavepet
<div class="copy_reg">All Rights Reserved&reg;</div></div>

<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
</script>

</body>

</html>

＆＃13;

Answer 1

您的vspace =“60”正在将图片向下推到左侧。你应该使用更少的vspace。

<img src="images/donate.png" width="300" height="100" vspace="50" hspace="10" align="right" />

https://codepen.io/anon/pen/wmNJry

Answer 2

＆＃13;

<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
</script>

＆＃13;

<style>
a{text-decoration: none;
color: Black;}

div#sub{display: inline;
color: #339900;}

body {margin:0;}

/*This is for navigation*/
a#home{
  float:right;

}


.topnav {
    overflow: hidden;
    background-color: #4caf50;
    width: 100%;
    float: left;
}

.topnav a {

  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #666666;
  color: white;
}

.topnav a.active {
  background-color: white;
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }}
/*This is the end*/

/*This is for header*/
body {
  margin: 0;
  font-family: Arial;}

.top-container {
  background-color: white;
  padding: 0px;
  text-align: left;}

.content {
  padding-top: 14px;}

.header {
  padding: 0px 0px;
  background: #4caf50;
  color: #4caf50;
  z-index:100;}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;}

.sticky + .content {
  padding-top: 64px;}
/*This is the end*/

/*This is for footer*/
 .footer {
    background-color: #0b0c0c;
    padding: 10px;
    color: white;
    padding-top: 70px;
    padding-bottom: 100px;
    padding-left: 40px;}

 .footer_2{background-color: #1e1f21;
 padding-top: 20px;
 padding-bottom: 30px;
 color: white; }

 div#info{ color: #9fa1a3;}


 .copy_reg{float:right;
 display: inline-block;
 padding-right: 10px; }

 /*This is for media buttons*/
 .fa {
  padding: 6px;
  font-size: 5px;
  text-align: center;
  text-decoration: none;
  margin: 5px 5px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;}

 .media{font-size: 20px;
   padding-right: 60px;
   float: right;
   display: inline-block;
}
</style>

＆＃13;

<!doctype>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <title>About Us</title>
 <link rel="stylesheet" href="letsavepet.css" type="text/css" />
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body style=background:white>

<img src="images/logo.png" width="200" height="200" hspace="30" />
<a href="donate.html"><img src="images/donate.png" width="300" height="100"  vspace="60" hspace="10" align="right" /> </a>

<div class="header" id="myHeader">
<div class="topnav" id="myTopnav">
  <a href="index.html">Home</a>
  <a href="news.html">News</a>
  <a href="gallery.html">Gallery</a>
  <a href="joinus.html">Join Us</a>
  <a href="donate.html">Donate</a>
  <a href="aboutus.html"  class="active">About Us</a>
  <a id="home" href="index.html">
<img src="images/Home-Button.png" width="20" height="20"/></a>
</div></div>

<div class="content">
<img src="images/stray.jpg" align="right" width="50%" height="70%" border="1" />
<p><font size="5px">Lets Save Pets is a non-profit organization that is dedicated to provide and care for homeless and abused animals. Lets Save Pets conducts activities to promote fund-raising activites and importance of saving pets among common people to help provide care and shelter to animals in need.
What makes Lets Save Pets different from other non-profit organizations is that we will provide not only food and help to homeless pets but we will also aim at giving them shelters and better living conditions.
We believe this is a much needed task to do because this will help in reducing road accidents, pollution and most importantly will reduce their number on roads and will help them in living a joyful life!
Founder, Suryansh Manav is a student of grade 10<sup>th</sup>. He started his mission on 18 June, 2017 with some of his friends. His passion for pets started when his family stopped him from having a pet.That is why he decided to start Lets Save Pets to save homeless animals and to gather other people like him.
All of the members are caring, and have a tremendous amount of love and passion for the love and caring for animals.
Lets Save Pets members are from different countries of the world like India, U.S.A, etc. and we are proud to have them with us!</font> </p>
</div>

<div class="footer">
<div class="media">FIND&nbsp;US&nbsp;ON<a href="https://www.facebook.com/letsavepet/" class="fa fa-facebook"></a></div>
CONTACT&nbsp;INFO<br /><br />
<div id="info"><i class="material-icons">local_phone</i> +91 7982189411<br /><br />
<i class="material-icons">local_post_office</i> letsavepet@gmail.com<br /><br />
<i class="material-icons">map</i> 1/5300-C, Street no.- 11,<br />
Balbir Nagar Ext., Shahdara,<br />
Delhi-110032, India</div>
</div>

<div class="footer_2">&nbsp;&nbsp; &copy; Letsavepet
<div class="copy_reg">All Rights Reserved&reg;</div></div>

</body>

</html>

＆＃13;

Answer 3

在.topnav class

中添加以下属性

.topnav{
  width: 100%;
  float: right; }

图片没有贴在右边

3 个答案: