小贝子编程

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



所以我不能让标签中的图像对齐到主包装器/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, Ariel, Sans-Serif;
font-size: 12px;
letter-spacing: 1px;
}
ul {
font-family: Veranda, Ariel, 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>

你的图像太宽了(比nav的li更宽，所以它迫使li父元素溢出，即变得更宽。

为了避免这种情况，添加以下CSS，这将限制图像的大小(即宽度)适合li(包括填充):

li.imgNav 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, Ariel, Sans-Serif;
font-size: 12px;
letter-spacing: 1px;
}
ul {
font-family: Veranda, Ariel, 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>

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

也介绍需要一个。如果是Class，在前面加#;如果是ID，在前面加#。

虽然我看不出在你的HTML代码中使用的介绍?

所以我已经将引入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, Ariel, Sans-Serif;
font-size: 12px;
letter-spacing: 1px;
}
ul {
font-family: Veranda, Ariel, 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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium