Question

我的网站标题部分有一段代码：

＆＃13;

.nav {
    position:relative;
    display:inline-block;
}
#header-image {
    display:inline-block;
    position:relative;
    height:50%;
}
.header-container {
    height:6vw;
    position:relative;
    vertical-align: bottom;
}

＆＃13;

<div class="header-container">
    <a href='index.html'>
        <img src='img/logo.png' alt="Logo" id='header-image'/>
    </a>
    <nav class="nav">
        <ul>
            <li><a href='aboutus.html'>About Us</a></li>
            <li><a href='activities.html'>Activities</a></li>
            <li><a href='google.ca'>Media</a></li>
            <li><a href='google.ca'>Contact Us</a></li>
        </ul>
    </nav>
</div>

＆＃13;

我希望图像的底部与导航栏的底部对齐。但是发生的事情是图像低于导航栏。有什么想法吗？

Answer 1

将您的列表项设置为display: inline-block;

.nav {
  position: relative;
  display: inline-block;
}
#header-image {
  position: relative;
}
.header-container {
  position: relative;
  vertical-align: bottom;
}
li {
  display: inline-block;
}

<div class="header-container">
  <a href="index.html">
    <img src='http://placehold.it/50x50' id='header-image' />
  </a>
  <nav class="nav">
    <ul>
      <li><a href='aboutus.html'>About Us</a>
      </li>
      <li><a href='activities.html'>Activities</a>
      </li>
      <li><a href='google.ca'>Media</a>
      </li>
      <li><a href='google.ca'>Contact Us</a>
      </li>
    </ul>

  </nav>
</div>

Answer 2

.nav {
   position:relative;
   display:inline-block;
 }

#header-image {
  display: inline-block;
  position: absolute;
  bottom: 15px;
}
.header-container {
  position:relative;
}

使用此样式设置可能会满足您的要求

为什么vertical-align：bottom不工作？

2 个答案: