Question

以下是我的HTML代码：

＆＃13;

#logo {
  position: fixed;
  left: 400px;
  top: 20px;
}

#home-logo {
  position: fixed;
  left: 590px;
  top: 20px;
}

#main-menu {
  position: relative;
  left: 800px;
  top: 50px;
}

#main-menu a {
  display: inline;
  font-size: 20px;
  color: black;
  padding: 14px 13px;
  text-decoration: none;
}

#main-menu a:hover {
  background: #f8f8ff;
}

#dropbtn {
  position: absolute;
}

#clickable-button {
  position: relative;
  font-size: 20px;
  color: black;
  padding: 14px 13px;
  border: none;
  background-color: inherit;
}

#clickable-button:hover {
  background: #f8f8ff;
}

#dropdown-content {
  overflow: hidden;
  position: absolute;
  left: 88px;
  top: 50px;
  display: none;
  background-color: #f9f9f9;
}

#dropdown-content a {
  overflow: hidden;
  display: block;
  font-size: 20px;
  color: black;
  padding: 14px 13px;
  text-decoration: none;
  text-align: left;
}

#dropdown-content a:hover {
  background: #f8f8ff;
}

#dropbtn:hover #dropdown-content {
  display: block;
}

＆＃13;

<body>
  <div id="logo">
    <a href="http://www.manchester.ac.uk/">
      <figure>
        <img src="https://upload.wikimedia.org/wikipedia/en/7/72/UniOfManchesterLogo.svg" width="150" height="80" alt="University logo">
      </figure>
    </a>
  </div>
  <div id="home-logo">
    <a href="main.html">
      <figure>
        <img src="http://www.diywebsitetools.com/wp-content/uploads/2012/05/homeicon.jpg" class="img-rounded" width="120" height="70" alt="going back to the main page">
      </figure>
    </a>
  </div>
  <div id="main-menu">
    <a href="#Markup languages and scripting"> M&amp;S </a>
    <a href="#Health & saftely issues when working with computers"> Health&amp;Saftely </a>
    <div id="dropbtn">
      <button id="clickable-button">U&amp;C</button>
      <div id="dropdown-content">
        <a href="#1">Statistics and backgroud information</a>
        <a href="#2">Research groups / research projects</a>
        <a href="#3">Courses</a>
      </div>
    </div>
    <a href="#A group team page with information about each group member"> About us </a>
  </div>
</body>

＆＃13;

当我运行这个程序时，U＆amp; C图标会跳转到下一行，但我希望将它保持在＆＃34; health＆amp; saftely＆＃34;和＆＃34;关于我们＆＃34;图标。如果有人让我知道这个粗俗的话，我真的很感激。

Answer 1

一方面，div元素默认为块级元素。这意味着它默认位于前一个位置（而不是您想要的位置）。

另一方面，您正在应用绝对定位，这不会为元素留出空间。

将#dropbtn元素更改为span（而不是div）：<div id="dropbtn">改为<span id="dropbtn">

并删除它的绝对定位（删除CSS规则）：

#dropbtn{
          position:absolute;
        }

完整的代码在下面的代码段中。

简要解释原因：

<强> DIV /跨度

div是块级元素，span是内联元素（默认情况下，现在可以使用CSS display属性）。它们都没有语义含义（与p（=段落），table（=表格），ol / ul（=列表）等不同，它们是只是容器通常用于演示目的。

inline 元素仅占用定义内联元素（https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements）的标记所限定的空间。内联元素通常位于页面流之后：从左到右，从上到下;在开始下一行之前，一行已满。

块级元素占用其父元素（容器）的整个空间，从而创建“块”（https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements）块级元素始终在新行上开始占用可用的全宽（尽可能向左和向右延伸）（https://www.w3schools.com/html/html_blocks.asp）。

更多信息：What is the difference between HTML tags div and span?

CSS绝对定位

position CSS属性为定位元素选择替代规则。分配absolute值时，不会为元素留出空间（除其他外）（MDN: CSS position property）。 position : absolute也暗示元素相对于其第一个定位（非静态）祖先元素（w3schools: CSS position property）

定位

static是HTML元素的默认值。此关键字允许元素使用正常行为。也就是说，它在流程中的当前位置布局。（MDN: CSS position property）

申请案件

在您的情况下，您需要将元素布置在流中的“正常”位置（两个相邻元素之间）。它不应该以新的行开始（即内联而不是块，这意味着跨度而不是div），并且你需要它来正常占用它的空间（因此绝对定位不适用）。

完整的代码段

#logo{ position:fixed;
       left:400px;
       top:20px;
     }
#home-logo{ position:fixed;
            left:590px;
            top:20px;
          }
#main-menu {
              position:relative;
              left:800px;
              top:50px;
           }
#main-menu a{  
               display:inline;
               font-size:20px;
               color:black;
               padding:14px 13px; 
               text-decoration: none;
             }
#main-menu a:hover{
                    background:#f8f8ff;
                  }
/*#dropbtn{
          position:absolute;

        }*/

#clickable-button{
                   position:relative;
                   font-size:20px;
                   color:black;
                   padding:14px 13px; 
                   border:none;
                   background-color:inherit;
                 }

#clickable-button:hover{
                         background:#f8f8ff;
                       }  
#dropdown-content{
                   overflow:hidden;
                   position:absolute;
                   left:88px;
                   top:50px; 
                   display:none;
                   background-color: #f9f9f9;
                  }
#dropdown-content a{
                     overflow:hidden;
                     display:block;
                     font-size:20px;
                     color:black;
                     padding:14px 13px; 
                     text-decoration: none;
                     text-align:left;
                   }

#dropdown-content a:hover{
                           background:#f8f8ff;
                         }
#dropbtn:hover #dropdown-content{
                                  display:block;
}

<!DOCTYPE html>
<head>
  <link rel="stylesheet" type="text/css" href="design.css" media="all">
  <meta charset="UTF-8">
  <title>First website</title>
</head>
<body>
  <div id="logo">
    <a href="http://www.manchester.ac.uk/">
      <figure>
        <img src="https://upload.wikimedia.org/wikipedia/en/7/72/UniOfManchesterLogo.svg" width="150"   height="80" alt="University logo" >
      </figure>
    </a>
  </div>
  <div id="home-logo">
    <a href="main.html">
      <figure>
        <img src="http://www.diywebsitetools.com/wp-content/uploads/2012/05/homeicon.jpg" class="img-rounded" width="120"   height="70" alt="going back to the main page">
      </figure>
    </a>
  </div>
  <div id="main-menu">
   <a href="#Markup languages and scripting"> M&S </a>
   <a href="#Health & saftely issues when working with computers"> Health&Saftely </a>
   <span id="dropbtn">
    <button id="clickable-button">U&C</button>
      <div id="dropdown-content">
        <a href="#1">Statistics and backgroud information</a>
        <a href="#2">Research groups / research projects</a>
        <a href="#3">Courses</a>
      </div>
   </span>
   <a href="#A group team page with information about each group member"> About us </a>
  </div>
</body>

结果截图：

html和css之间不兼容

1 个答案: