无法移动徽标答案

【问题标题】：Can't get the logo to move无法移动徽标
【发布时间】：2020-08-09 15:15:27
【问题描述】：

我似乎无法让徽标移动。我想在导航栏中有徽标但是无论我尝试什么，它都卡在了位置。我尝试应用！important，设置顶部，底部，但它不会移动。有人知道这里有什么问题吗？另外，导航栏上的文本不会将颜色变为黑色，提前谢谢`

.top {
  /*    background-color:4D4D4D;*/
  background-image: url("first-background-2.png");
  object-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
  padding-bottom: 300px;
  height: 920px;
}

#logo {
  text-align: left !important;
  opacity: 80%;
  float: left;
  height: 600px;
  top: 60px;
  left: 60px
}

.text {
  padding-right: 20px!important;
  color: black !important;
  font-size: 30px;
  font-weight: bold;
  text-align: right;
  word-spacing: 20px;
}

#topnav {
  background-color: white;
  width: 100%;
  height: 100px;
  padding-top: 60;
  opacity: 60%;
  position: relative;
  top: -1150px;
  display: inline-block;
}

<!docktype html>
<html>

<body>

  <head>
    <style type="text/css">
      body {
        margin: 0;
      }
    </style>
    <link href="edusolut.css" type="text/css" rel="stylesheet">
    <title>Edusolut</title>
  </head>
  <nav id="top bar">
    <div class="top">

    </div>

    <!--    navbar-->

    <div id="topnav">
      <div id="logo">
        <img src="./logo2.png" width="auto" height="162 pt" alt="edusolut logo">
      </div>
      <nav class="text">
        <a class="active" href="#top">Home</a>
        <a href="#news">Training</a>
        <a href="#contact">Contact</a>
        <a href="#about">Service</a>
      </nav>
    </div>
  </nav>

  <!-- end navbar-->

【问题讨论】：

您希望徽标在导航栏中的哪个位置？你的预期输出是什么？
非常感谢大家！！

标签： html css

【解决方案1】：

既然你想移动它，你可以使用：

margin-left：（以像素为单位的数量） margin-right：（以像素为单位）

在 CSS 盒子模型中，边距在外侧。所以它肯定会动。

如果没有，你可以使用：

padding-left：（以像素为单位） padding-right: (以像素为单位)

【讨论】：

【解决方案2】：

您可以将文本更改为黑色

.text > a{
    color:black;
}

请指定徽标的位置

【讨论】：

我希望将徽标留在导航栏中。

【解决方案3】：

使用边距/填充甚至位置

Paddings;
padding-left: px;
padding-right: px;
padding-top: px;
padding-bottom: px;

Margins;
margin-left: px;
margin-right: px;
margin-top: px;
margin-bottom: px;

create a div form to the logo;
HTML;
<div class="mylogo">
<img src="whatever.png">
</div>

CSS;
.mylogo { //Just a example or you can you the absolute form, if you use that your logo will stay fixed where you put it!
position: relative;
top: px;
left: px;
right: px;
bottom: px;
}
Or text-align, justify-content, etc 
float: left;
text-align: left;
ETC

【讨论】：