为什么li元素与“ block”显示重叠？

Question

我正在尝试创建如下的响应式菜单。

 .menu { margin: auto; text-align: center; margin-top: 10px; padding: 10px; } .menu ul { list-style-type: none; padding-left: 0; } .menu li { display: inline; } .menu li a { border: 1px solid #eee; padding: 10px 15px; text-transform: uppercase; transition: background 0.5s ease; } .menu li a:focus { text-decoration: none; } .menu li a:hover { text-decoration: none; background: #ddd; } @media (max-width: 620px) { .menu li { display: block; width: 100%; } } 

 <div class="menu"> <ul> <li><a href="#/home">Home</a> </li> <li><a href="#/experience">Experience</a> </li> <li><a href="#/education">Education</a> </li> <li><a href="#/opensource">Open Source</a> </li> <li><a href="#/contact">Contact</a> </li> </ul> </div> 

但是菜单项在小屏幕中重叠。 为什么会发生此问题？ 此外，我已将宽度设置为100％，但条目不会像预期的那样在小屏幕上更改大小。

Answer 1

您需要为锚标签设置display:inline-block

.menu li a {
  display: inline-block;
}

 .menu { margin: auto; text-align: center; margin-top: 10px; padding: 10px; } .menu ul { list-style-type: none; padding-left: 0; } .menu li { display: inline; } .menu li a { border: 1px solid #eee; padding: 10px 15px; text-transform: uppercase; transition: background 0.5s ease; display: inline-block; } .menu li a:focus { text-decoration: none; } .menu li a:hover { text-decoration: none; background: #ddd; } @media (max-width: 620px) { .menu li { display: block; } } 

 <div class="menu"> <ul> <li><a href="#/home">Home</a> </li> <li><a href="#/experience">Experience</a> </li> <li><a href="#/education">Education</a> </li> <li><a href="#/opensource">Open Source</a> </li> <li><a href="#/contact">Contact</a> </li> </ul> </div> 

Answer 2

 .menu { margin: auto; text-align: center; margin-top: 10px; padding: 10px; } .menu ul { list-style-type: none; padding-left: 0; } .menu li { display: inline; } .menu li a { border: 1px solid #eee; padding: 10px 15px; text-transform: uppercase; transition: background 0.5s ease; display:block; } .menu li a:focus { text-decoration: none; } .menu li a:hover { text-decoration: none; background: #ddd; } @media (max-width: 620px) { .menu li { display: block; width: 100%; } } 

 <div class="menu"> <ul> <li><a href="#/home">Home</a> </li> <li><a href="#/experience">Experience</a> </li> <li><a href="#/education">Education</a> </li> <li><a href="#/opensource">Open Source</a> </li> <li><a href="#/contact">Contact</a> </li> </ul> </div> 

锚默认情况下具有display: inline属性。 如果需要全角，则需要将其设置为display:block ，或者将其设置为display:inline-block以采用文本尺寸。