Question

我在#header-logo中有两个主要元素，它们应该是并排的。但是，第一个（#header-nav）被#header-logo内的导航菜单按钮按下，我不知道为什么。我不想通过隐藏溢出来修复它，我想了解为什么#header-container { position: fixed; height: 55px; width: 100%; color: #FFFFFF; font-size: 0; background: rgba(0, 168, 225, 0.25); } #header-logo { position: relative; display: inline-block; height: 100%; width: 45%; margin: 0; padding: 0; font-size: 22px; background-color: #CCCCCC; /*debug*/ } #header-nav { position: relative; display: inline-block; height: 100%; width: 55%; margin: 0; padding: 0; font-size: 22px; background: linear-gradient(to right, rgba(0, 168, 225, 0.7) 0%, rgba(0, 45, 91, 0.8) 60%); } #logo-container {} #nav-container { height: 55px; width: 95%; font-size: 22px; color: #FFFFFF; text-align: center: } ul.nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } ul.nav li { height: 100%; float: right; } ul.nav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; } ul.nav li a:hover { border-bottom: solid #ff0000; }元素首先被推下来。

这是怎么回事？

＆＃13;

<div id="header-container">
  <div id="header-logo">Logo</div>
  <div id="header-nav">
    <div id="nav-container">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

library(RODBC)
sql3 <- "SELECT TOP 10 Address AS Addr 
  FROM dbo.Address 
  Where CountryCode = 'RU'"
con <- odbcDriverConnect('driver={SQL SERVER};server=servername;database=databasename;trusted_connection=true')
df <- as.data.frame(sqlQuery(con,sql3),stringsASFactors=FALSE)
print(df)

＆＃13;

CHANGELOG

Answer 1

内联元素的默认垂直对齐方式是基线，这是您所看到的。将#header-logo CSS更改为包含vertical-align:top;

#header-container {
  position: fixed;
  height: 55px;
  width: 100%;
  color: #FFFFFF;
  font-size: 0;
  background: rgba(0, 168, 225, 0.25);
}

#header-logo {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 45%;
  margin: 0;
  padding: 0;
  font-size: 22px;
  background-color: #CCCCCC;
  vertical-align:top;
}

#header-nav {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 55%;
  margin: 0;
  padding: 0;
  font-size: 22px;
  background: linear-gradient(to right, rgba(0, 168, 225, 0.7) 0%, rgba(0, 45, 91, 0.8) 60%);
}

#logo-container {}

#nav-container {
  height: 55px;
  width: 95%;
  font-size: 22px;
  color: #FFFFFF;
  text-align: center:
}

ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul.nav li {
  height: 100%;
  float: right;
}

ul.nav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.nav li a:hover {
  border-bottom: solid #ff0000;
}

<div id="header-container">
  <div id="header-logo">
    Logo
  </div>

  <div id="header-nav">
    <div id="nav-container">
      <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </div>
</div>

CSS元素被压低了

1 个答案: