Question

我目前正在为我的朋友创建一个网站，但我遇到了一个问题。一个非常恼人的人。我有一个标题（一个标题为id的div）和一个ul里面。我将<img src="filename.extension" id="logo">添加到我的标题div中，但它显示在实际标题下方。我做了漂浮：对;认为它会出现在标题内，但它并没有。我在ul附近添加了1px的边框，看它是否占用了很多空间，但是还有足够的空间让徽标适合。

这是我的代码：（HTML）

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="header">
      <div id="headercon">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Vote</a></li>
          <li><a href="#">Rules</a></li>
          <li><a href="#">Discord</a></li>
          <li><a href="#">Status</a></li>
        </ul>
      </div>
      <img id="logo" src="vglogo.png">
    </div>
  </body>
</html>

（CSS）：

＆＃13;

#header {
  width: 100%;
  height: 60px;
  position: absolute;
  top: 0;
  background-color: #ededed;
  border-bottom: 5px solid #dddddd;
}

body {
  margin: 0;
  padding: 0;
}

#header>#headercon>ul {
  display: flex;
  line-height: 10px;
  font-size: 25px;
}

#headercon {
  display: block;
  width: 60%;
  height: auto;
  margin-right: 500px;
  margin-left: 100px;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: black;
  padding: 0 10px;
}

#logo {
  float: right;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css"> </head>

<body>
  <div id="header">
    <div id="headercon">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Vote</a></li>
        <li><a href="#">Rules</a></li>
        <li><a href="#">Discord</a></li>
        <li><a href="#">Status</a></li>
      </ul>
    </div> <img id="logo" src="vglogo.png"> </div>
</body>

</html>

＆＃13;

Answer 1

你可能会这样想吗？

body {
  margin: 0;
  padding: 0;
}

#header {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  left:0;
  background-color: #ededed;
  border-bottom: 5px solid #dddddd;
}

#header>ul>li {
  float:left;
  list-style-type: none;
}

#header>ul>li>a {
  font-size: 25px;
  text-decoration: none;
  color: black;
  padding: 0 10px;
}
.logo {
  float: right!important;
  right:40px;
  position: relative;
  top: -10px;
}
.logo img{
  height:50px
}

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="header">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Vote</a></li>
        <li><a href="#">Rules</a></li>
        <li><a href="#">Discord</a></li>
        <li><a href="#">Status</a></li>
        <li class="logo"><img id="logo" src="https://static1.squarespace.com/static/579d30036a49638cd66ee855/57a69cadb3db2b8908f27da1/57a69d90e6f2e1f140d7bcfa/1470542795812/Intel_logo.png"></li>
      </ul>
    </div>
  </body>
</html>

徽标不会出现在标题中

1 个答案: