微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

垂直菜单中的图像未与菜单容器对齐

分类：编程问答

如何解决垂直菜单中的图像未与菜单容器对齐

所以我无法将标签中的图像与主包装器/Ul 的中心对齐。我已经尝试在标签中的图像、标签本身和标签中添加类，但无论我使用位置还是浮动，图像都保持在菜单包装器之外。我已经有几年没有使用它了，所以我一定忘记了这里的一个基本步骤来让它工作。

h1 {
  font-family: Veranda,Ariel,Sans-Serif;
  font-size: 30px;
  color: gray;
}

#wrapper {
  width: 180px;
  height: 200px;
  padding: 0px;
}

p {
  margin: 5px;
  padding: 5px;
  color: gray;
  font-family: Veranda,Sans-Serif;
  font-size: 12px;
  letter-spacing: 1px;

}

ul {
  font-family: Veranda,Sans-Serif;
  font-size: 16px;
  margin: 0;
  padding: 0px;
  list-style: none;
  letter-spacing: 2px;
  text-align: center;
}

ul li {
  display: block;
  position: relative;
  width: 180px;
  margin: 0;
}

introImg {
  float: none;
  position:inherit;
  padding: 0;
  margin: auto;
}

li ul {
  display: none;
  margin: 0;
}

ul li a {
  display: block;
  text-decoration: none;
  background: gray;
  color: #000;
  border-top: 2px solid #666;
  padding: 5px 15px 5px 15px;
  margin-left: 1px;
  white-space: Nowrap;
}

ul li a:hover {
  background: #949494;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: left;
  font-size: 11px;
}

li:hover a {
  background: #A0A0A0;
}

li:hover li a:hover {
  background: #C2C2C2;
}

ul li ul {
  position: absolute;
  left: 100%;
  top: 0;
}
<h1 align="center">JavaScript Menu Conversion</h1>
    <p align="center">Converting old JavaScript to menu to Static HTML & CSS.</p>
    <div id="wrapper">
      <img src="https://tlod.net/include/img/buttontop.png">
      <ul id="menu">
        <li class= "imgNav"><a href=""><img src="https://tlod.net/include/img/introbutton.jpg"></a>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Introduction</a></li>
          </ul>
        </li>
        <li><a href="">Story</a>
          <ul>
            <li><a href="#">Prologue</a></li>
            <li><a href="#">Ch1: Serdian War</a></li>
            <li><a href="#">Ch2: The Platinum Shadow</a></li>
            <li><a href="#">Ch3: Fate and Soul</a></li>
            <li><a href="#">Ch4: Moon and Fate</a></li>
          </ul>
        </li>
        <li><a href="">Characters</a>
          <ul>
            <li><a href="#">Main</a></li>
            <li><a href="#">Other</a></li>
          </ul>
        </li>
        <li><a href="">Game Help</a>
          <ul>
            <li><a href="#">Abnormalities</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Additions</a></li>
            <li><a href="#">Art of fighting</a></li>
            <li><a href="#">Enemies</a></li>
            <li><a href="#">Experience</a></li>
            <li><a href="#">Items</a></li>
            <li><a href="#">Item Locations</a></li>
            <li><a href="#">Shopping</a></li>
            <li><a href="#">Sidequests</a></li>
            <li><a href="#">Special Items</a></li>
            <li><a href="#">Stardust</a></li>
            <li><a href="#">Stardust Picture Guide</a></li>
            <li><a href="#">Team/Stat Evaluation</a></li>
            <li><a href="#">Weapons/Armor</a></li>
            <li><a href="#">Walkthrough</a></li>
          </ul>
        </li>
        <li><a href="">Printables</a>
          <ul>
            <li><a href="#">Abnormalities</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Additions</a></li>
            <li><a href="#">Art of fighting</a></li>
            <li><a href="#">Enemies</a></li>
            <li><a href="#">Experience</a></li>
            <li><a href="#">Items</a></li>
            <li><a href="#">Item Locations</a></li>
            <li><a href="#">Shopping</a></li>
            <li><a href="#">Sidequests</a></li>
            <li><a href="#">Special Items</a></li>
            <li><a href="#">Stardust</a></li>
            <li><a href="#">Stardust Picture Guide</a></li>
            <li><a href="#">Team/Stat Evaluation</a></li>
            <li><a href="#">Weapons/Armor</a></li>
            <li><a href="#">Walkthrough</a></li>
          </ul>
        </li>
        <li><a href="">Media</a>
          <ul>
            <li><a href="#">MIdis</a></li>
            <li><a href="#">MP3s</a></li>
            <li><a href="#">Videos</a></li>
            <li><a href="#">Voice Clips</a></li>
          </ul>
        </li>
        <li><a href="">Etc.</a>
          <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">Links In/Out</a></li>
            <li><a href="#">Notes</a></li>
            <li><a href="#">Voices/Lyrics</a></li>
            <li><a href="#">Translations</a></li>
          </ul>
        </li>
      </ul>
      <img src="https://tlod.net/include/img/buttonbottom.png">
    </div>

解决方法

尝试将 width: 100%; 添加到与包装器 div 重叠的图像。

还有 introImg 需要一个 .如果它是一个类，则在它前面，如果它是一个 ID，则在它前面。

虽然我在你的 HTML 代码中看不到 introImg 的使用？

所以我将 introImg CSS 代码块更改为 img 标签并添加了 width: 100%;

h1 {
  font-family: Veranda,Ariel,Sans-Serif;
  font-size: 30px;
  color: gray;
}

#wrapper {
  width: 180px;
  height: 200px;
  padding: 0px;
}

p {
  margin: 5px;
  padding: 5px;
  color: gray;
  font-family: Veranda,Sans-Serif;
  font-size: 12px;
  letter-spacing: 1px;

}

ul {
  font-family: Veranda,Sans-Serif;
  font-size: 16px;
  margin: 0;
  padding: 0px;
  list-style: none;
  letter-spacing: 2px;
  text-align: center;
}

ul li {
  display: block;
  position: relative;
  width: 180px;
  margin: 0;
}

img {
  float: none;
  position:inherit;
  padding: 0;
  margin: auto;
  width: 100%;
}

li ul {
  display: none;
  margin: 0;
}

ul li a {
  display: block;
  text-decoration: none;
  background: gray;
  color: #000;
  border-top: 2px solid #666;
  padding: 5px 15px 5px 15px;
  margin-left: 1px;
  white-space: nowrap;
}

ul li a:hover {
  background: #949494;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: left;
  font-size: 11px;
}

li:hover a {
  background: #A0A0A0;
}

li:hover li a:hover {
  background: #C2C2C2;
}

ul li ul {
  position: absolute;
  left: 100%;
  top: 0;
}
<h1 align="center">JavaScript Menu Conversion</h1>
    <p align="center">Converting old JavaScript to menu to Static HTML & CSS.</p>
    <div id="wrapper">
      <img src="https://tlod.net/include/img/buttontop.png">
      <ul id="menu">
        <li class= "imgNav"><a href=""><img src="https://tlod.net/include/img/introbutton.jpg"></a>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Introduction</a></li>
          </ul>
        </li>
        <li><a href="">Story</a>
          <ul>
            <li><a href="#">Prologue</a></li>
            <li><a href="#">Ch1: Serdian War</a></li>
            <li><a href="#">Ch2: The Platinum Shadow</a></li>
            <li><a href="#">Ch3: Fate and Soul</a></li>
            <li><a href="#">Ch4: Moon and Fate</a></li>
          </ul>
        </li>
        <li><a href="">Characters</a>
          <ul>
            <li><a href="#">Main</a></li>
            <li><a href="#">Other</a></li>
          </ul>
        </li>
        <li><a href="">Game Help</a>
          <ul>
            <li><a href="#">Abnormalities</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Additions</a></li>
            <li><a href="#">Art of Fighting</a></li>
            <li><a href="#">Enemies</a></li>
            <li><a href="#">Experience</a></li>
            <li><a href="#">Items</a></li>
            <li><a href="#">Item Locations</a></li>
            <li><a href="#">Shopping</a></li>
            <li><a href="#">Sidequests</a></li>
            <li><a href="#">Special Items</a></li>
            <li><a href="#">Stardust</a></li>
            <li><a href="#">Stardust Picture Guide</a></li>
            <li><a href="#">Team/Stat Evaluation</a></li>
            <li><a href="#">Weapons/Armor</a></li>
            <li><a href="#">Walkthrough</a></li>
          </ul>
        </li>
        <li><a href="">Printables</a>
          <ul>
            <li><a href="#">Abnormalities</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Additions</a></li>
            <li><a href="#">Art of Fighting</a></li>
            <li><a href="#">Enemies</a></li>
            <li><a href="#">Experience</a></li>
            <li><a href="#">Items</a></li>
            <li><a href="#">Item Locations</a></li>
            <li><a href="#">Shopping</a></li>
            <li><a href="#">Sidequests</a></li>
            <li><a href="#">Special Items</a></li>
            <li><a href="#">Stardust</a></li>
            <li><a href="#">Stardust Picture Guide</a></li>
            <li><a href="#">Team/Stat Evaluation</a></li>
            <li><a href="#">Weapons/Armor</a></li>
            <li><a href="#">Walkthrough</a></li>
          </ul>
        </li>
        <li><a href="">Media</a>
          <ul>
            <li><a href="#">MIDIs</a></li>
            <li><a href="#">MP3s</a></li>
            <li><a href="#">Videos</a></li>
            <li><a href="#">Voice Clips</a></li>
          </ul>
        </li>
        <li><a href="">Etc.</a>
          <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Links In/Out</a></li>
            <li><a href="#">Notes</a></li>
            <li><a href="#">Voices/Lyrics</a></li>
            <li><a href="#">Translations</a></li>
          </ul>
        </li>
      </ul>
      <img src="https://tlod.net/include/img/buttonbottom.png">
    </div>

,

您的图片太宽了（比 li 的 nav 放宽，因此它强制其 li 父级溢出，即变得更宽。

为避免这种情况，请添加此 CSS 以将图像限制为适合 li（包括填充）的大小（即宽度）：

li.imgNav img {
  width: 100%;
}

这里应用于整个代码：

h1 {
  font-family: Veranda,Sans-Serif;
  font-size: 16px;
  margin: 0;
  padding: 0px;
  list-style: none;
  letter-spacing: 2px;
  text-align: center;
}

ul li {
  display: block;
  position: relative;
  width: 180px;
  margin: 0;
}

introImg {
  float: none;
  position:inherit;
  padding: 0;
  margin: auto;
}

li ul {
  display: none;
  margin: 0;
}

ul li a {
  display: block;
  text-decoration: none;
  background: gray;
  color: #000;
  border-top: 2px solid #666;
  padding: 5px 15px 5px 15px;
  white-space: nowrap;
}

ul li a:hover {
  background: #949494;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: left;
  font-size: 11px;
}

li:hover a {
  background: #A0A0A0;
}

li:hover li a:hover {
  background: #C2C2C2;
}

ul li ul {
  position: absolute;
  left: 100%;
  top: 0;
}
li.imgNav img {
  width: 100%;
}
<h1 align="center">JavaScript Menu Conversion</h1>
    <p align="center">Converting old JavaScript to menu to Static HTML & CSS.</p>
    <div id="wrapper">
      <img src="https://tlod.net/include/img/buttontop.png" style="display: block;">
      <ul id="menu">
        <li class= "imgNav"><a href=""><img src="https://tlod.net/include/img/introbutton.jpg"></a>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Introduction</a></li>
          </ul>
        </li>
        <li><a href="">Story</a>
          <ul>
            <li><a href="#">Prologue</a></li>
            <li><a href="#">Ch1: Serdian War</a></li>
            <li><a href="#">Ch2: The Platinum Shadow</a></li>
            <li><a href="#">Ch3: Fate and Soul</a></li>
            <li><a href="#">Ch4: Moon and Fate</a></li>
          </ul>
        </li>
        <li><a href="">Characters</a>
          <ul>
            <li><a href="#">Main</a></li>
            <li><a href="#">Other</a></li>
          </ul>
        </li>
        <li><a href="">Game Help</a>
          <ul>
            <li><a href="#">Abnormalities</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Additions</a></li>
            <li><a href="#">Art of Fighting</a></li>
            <li><a href="#">Enemies</a></li>
            <li><a href="#">Experience</a></li>
            <li><a href="#">Items</a></li>
            <li><a href="#">Item Locations</a></li>
            <li><a href="#">Shopping</a></li>
            <li><a href="#">Sidequests</a></li>
            <li><a href="#">Special Items</a></li>
            <li><a href="#">Stardust</a></li>
            <li><a href="#">Stardust Picture Guide</a></li>
            <li><a href="#">Team/Stat Evaluation</a></li>
            <li><a href="#">Weapons/Armor</a></li>
            <li><a href="#">Walkthrough</a></li>
          </ul>
        </li>
        <li><a href="">Printables</a>
          <ul>
            <li><a href="#">Abnormalities</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Additions</a></li>
            <li><a href="#">Art of Fighting</a></li>
            <li><a href="#">Enemies</a></li>
            <li><a href="#">Experience</a></li>
            <li><a href="#">Items</a></li>
            <li><a href="#">Item Locations</a></li>
            <li><a href="#">Shopping</a></li>
            <li><a href="#">Sidequests</a></li>
            <li><a href="#">Special Items</a></li>
            <li><a href="#">Stardust</a></li>
            <li><a href="#">Stardust Picture Guide</a></li>
            <li><a href="#">Team/Stat Evaluation</a></li>
            <li><a href="#">Weapons/Armor</a></li>
            <li><a href="#">Walkthrough</a></li>
          </ul>
        </li>
        <li><a href="">Media</a>
          <ul>
            <li><a href="#">MIDIs</a></li>
            <li><a href="#">MP3s</a></li>
            <li><a href="#">Videos</a></li>
            <li><a href="#">Voice Clips</a></li>
          </ul>
        </li>
        <li><a href="">Etc.</a>
          <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Links In/Out</a></li>
            <li><a href="#">Notes</a></li>
            <li><a href="#">Voices/Lyrics</a></li>
            <li><a href="#">Translations</a></li>
          </ul>
        </li>
      </ul>
      <img src="https://tlod.net/include/img/buttonbottom.png">
    </div>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot