列表项之间有间隙，我该如何解决？
[英]There is a gap between the list items, how can I fix it?
问题描述
I'm making a website on blogger and I don't understand why when I create the menu bar it has a space between the elements in it, how do I remove it now?
我在 blogger 上创建一个网站，我不明白为什么当我创建菜单栏时它的元素之间有一个空格，我现在如何删除它？
This problem only appears on my blogger website, when I run the code with the HTML file, it will appear like this:这个问题只出现在我的博客网站上，当我用 HTML 文件运行代码时，它会像这样出现：
here's the image:这是图片：
here's the code:这是代码：
#menu2 { background-color: #ff8000; } #menu2 ul { background: #ff8000; text-align: center; } #menu2 li { color: #ff8000; display: inline-block; width: auto; height: 40px; line-height: 40px; overflow: hidden; } #home { background-color: #ff8000; } #menu2 a { text-decoration: none; color: #000000; display: inline-block; } #menu2 a:hover { background: #ff8c19; color: #333; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> </head> <body> <div id="menu2"> <ul> <li id="home"><a href="#">Home</a> </li> <li id="intro"><a href="#">Introduce</a> </li> <li id="news"><a href="#">News</a> </li> <li id="qa"><a href="#">Q&A</a> </li> <li id="software"><a href="#">Software</a> </li> <li id="guide"><a href="#">Tutorial</a> </li> <li id="design"><a href="#">Design</a> </li> <li id="video"><a href="#">Video</a> </li> <li id="contact"><a href="#">Contact</a> </li> <li><a href="#">Recruitment</a> </li> </ul> </div> </body> </html>
I want to remove the gap between the list items我想删除列表项之间的差距
1 个解决方案
解决方案1
1 2022-12-21 04:51:34
I suggest you, always use a flex box to align items using a flex box is easy and it always works.我建议你，总是使用弹性盒子来对齐项目，使用弹性盒子很容易，而且总是有效。
.ull{ display: flex; align-items: center; justify-content: flex-start; padding-left:0px; } #menu2 ul li{ list-style:none; margin-right:10px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> </head> <body> <div id="menu2"> <ul class="ull" > <li id="home"><a href="#">Home</a> </li> <li id="intro"><a href="#">Introduce</a> </li> <li id="news"><a href="#">News</a> </li> <li id="qa"><a href="#">Q&A</a> </li> <li id="software"><a href="#">Software</a> </li> <li id="guide"><a href="#">Tutorial</a> </li> <li id="design"><a href="#">Design</a> </li> <li id="video"><a href="#">Video</a> </li> <li id="contact"><a href="#">Contact</a> </li> <li><a href="#">Recruitment</a> </li> </ul> </div> </body> </html>
Hope this is what you are looking for, let me know if there is some query or if you want something else.希望这就是您要找的东西，如果有任何疑问或您想要其他东西，请告诉我。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.