html - 有什么办法可以在垂直菜单中制作一行超文本吗？

Question

我正在设置一个新网页并制作一个水平菜单。超文本由2个词组成。它应该在一行中，但实际上一个词 = 1 行。我在 CSS 中有一个悬停效果，只要悬停效果有效，超文本就会在这一刻排成一排。我有点迷茫和困惑。我不知道要更改什么，你能帮我吗？

我已经尝试将 CSS display 属性更改为 table, block, solid。我也尝试过 min-width，希望文本会在一行上扩展，但它根本没有帮助。我也尝试更改边距和填充，但没有任何改变。

/image/AgqOJ.jpg

HTML

<div id ="panel">
 <img src= "Logo.jpg" alt="Logo">
 <h3>Nabidka</h3>
 <ul>
 <br />
 <br />
 <br />
 <li><a href ="index.html">Hlavní stránka</a></li>
 <li><a href ="program.html">Program 2020</a></li>
 <li><a href ="where_we_are.html">Kde sídlíme</a></li>
 <li><a href ="organisators.html">Organizátoři</a></li>
 <li><a href ="about_us.html">O nás</a></li>                                                    
 <li><a href ="gallery.html">Galerie</a></li>
 <li class ="last"><a href = "facebook.html">Facebook</a></li>
 </ul>
 </div>

CSS

#panel{
width: 15%;
float: left;  
background: rgb(153,153,153);
padding: 5px 0 0 0;
}

#panel h3{
display: none;
}

#panel ul{
margin: 0;                              
padding: 0;
list-style-type: none;
background: rgb(153,153,153);
}

#panel li{                                                                                                                                                                                                                                  
/*border-top: 0px solid rgb(0,176,176);*/
/*border-width: 2px 0px 0px 0px;*/ /*line between hypertexts*/
/*margin: 0px 0px 0px 0px;*/                           
/*margin-bottom: 1px;*/
display: block; 
} 

#panel a{
display: block;
width: 100px;
height: 30px;
color: black;
font-size: 120%;
font-weight: bold;
text-decoration: none;
padding: 6px 185px 6px 4px; 
margin: 5px 0px 0px 0px; 
background: rgb(153,153,153);
}

#panel a:hover{           /*redrawing*/
color: white;
text-decoration: none;
background: rgb(0,0,0);
padding: 4px 0px 4px 2px;
min-width: 100%;
}

#panel li.spodni{
height: 1500px;
}

img {
width: 200px;
height: 200px;
padding: 0px 0px 0px 20px;
}

Answer 1

a标签宽度在正常状态下已经被限制了:

#panel a{
display: block;
width: 100px; --> this line
height: 30px;
color: black;
font-size: 120%;
font-weight: bold;
text-decoration: none;
padding: 6px 185px 6px 4px; 
margin: 5px 0px 0px 0px; 
background: rgb(153,153,153);
}

您可以删除 width: 100px; 行，因为 display:block 会将元素宽度设置为其容器的 100%。