gpt4 book ai didi

html - 如何删除导航栏上方和两侧的空间?

转载 作者:行者123 更新时间:2023-11-28 15:23:22 25 4
gpt4 key购买 nike

我正在学习 HTML 和 CSS,我想知道如何删除导航栏上方和两侧的空间。导航栏的周围应该没有空间。下面是代码。提前致谢。

nav{
text-align:right;
padding-right:0px;
padding-top:0px;
}
ul{
color:white;
background-color:cyan;
padding-top:19px;
padding-bottom:19px;
padding-right:10px;
list-style:none;
margin-top:none;
}
.sb{
float:left;
}
<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>

</head>
<body>
<nav>
<ul>
<li>
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
<a href="www.az.com">Home |</a>
<a href="www.az.com/profile">Profile |</a>
<a href="www.az.com/settings">Settings</a>
</li></ul>
</nav>
</body>
</html>

最佳答案

您希望导航栏周围没有任何空白。所以我拿了你的代码并对它做了一些修改。

首先是我删除了您的 HTML <nav><ul>然后将这些部分替换为 <div> .

代码:

<body>
<div class="div">
<div class="sb">
<input type="text" name="search">
<input type="submit" name="search" value="search">
</div>
<div class="link">
<a href="www.az.com">Home |</a>
<a href="www.az.com/profile">Profile |</a>
<a href="www.az.com/settings">Settings</a>
</div>
</div>
</body>

之后,我获取了您的 CSS 并对其进行了更改以适应您提出的查询。

代码:

.link{
margin-left:80%
}
.div{
color:white;
background-color:cyan;
padding-top:19px;
padding-bottom:19px;
padding-right:10px;
height:10%;
}
.sb{
float:left;
margin-left: 2%;
}
body,html{
margin: 0;
padding: 0;
border: 0;
}

工作中的 fiddle Here

现在,您的导航栏在上方、右侧或左侧没有任何空白。现在由您来修改它以满足您的需要。

关于html - 如何删除导航栏上方和两侧的空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45672060/

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