我有一个导航栏,我想排成一行,但是每个项目之间只有一个空间,我希望它们被均匀地隔开,并且很灵活,以便在我更改窗口大小时进行调整。
这是我的HTML
<div class="navigation">
<div class="navhead">
<h2>Navigation</h2>
</div>
<div class="navlist">
<ul>
<li><a href="Home Page.html">Home</a></li>
<li>Chat</li>
<li>Blog</li>
</ul>
</div>
</div>
这是我的CSS
.navlist li{
text-decoration: none;
color: #000000;
list-style-type: none;
display: inline;
text-indent: 10%;
}
请记住我在7年级,不要用太复杂的词
只需应用您的li的宽度,并在需要时添加填充值即可。但是将内联更改为table-cell。要应用它们之间的空间,请应用边框间距值,如下所示:
.navlist{
border-spacing: 10px;
}
.navlist li{
text-decoration: none;
color: #000000;
list-style-type: none;
display: table-cell;
text-indent: 10%;
width: 20%;
padding: 1em;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句