gpt4 book ai didi

html - 如何仅使用 html 和 css 在导航栏的右边框中添加空间?

转载 作者:行者123 更新时间:2023-11-28 15:04:37 24 4
gpt4 key购买 nike

我无法在导航栏中添加一点空间。这是我在学校的事件,请帮忙

这是一张图片navbarpic

到目前为止我的 html 和 css 是

 .nav .container  ul li{
display: inline-block;
margin: 10px 18px;
position: relative;
}

.nav li{
border-right: 1px solid black;
}


<body>
<div>
<div class="nav">
<div class="container">
<ul>
<li ><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">OUR SERVICES</a></li></li>
</ul>
</div>
</div>

到目前为止,这是我的代码。我将不胜感激任何帮助。提前致谢:)

最佳答案

您可以在 li 元素的右侧为导航项添加一些填充:

.nav .container  ul li{
display: inline-block;
margin: 10px 18px;
position: relative;
}

.nav li{
border-right: 1px solid black;
padding-right: 5%;
}
<div>
<div class="nav">
<div class="container">
<ul>
<li ><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">OUR SERVICES</a></li>
</ul>
</div>
</div>

关于html - 如何仅使用 html 和 css 在导航栏的右边框中添加空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49706649/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com