如何删除导航栏上方和侧面的空间?

时间:2017-08-14 10:03:48

标签: html css

我正在学习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>
&#13;
&#13;
&#13;

8 个答案:

答案 0 :(得分:1)

我想,你在寻找这个。??

nav{
text-align:right;
padding-right:0px;
padding-top:0px;
}
ul{
color:white;
background-color:cyan;
padding-top:15px;
padding-bottom:19px;
padding-right:10px;
list-style:none;
margin:0px;
}
.sb{
float:left;
}
body{
margin: 0px
}
<!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>

答案 1 :(得分:1)

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

首先是我删除了<nav><ul>的HTML,然后用<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;
}

工作小提琴the bug

现在,您的导航栏上方或右侧或左侧没有任何空白区域。现在,您需要修补它以满足您的需求。

答案 2 :(得分:0)

<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>

<style>
html,body{
  margin:0;
  padding:0;
}
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:0;
}
.sb{
float:left;
}
</style>
</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>

答案 3 :(得分:0)

bodyul标记添加以下样式,以便导航栏周围没有空格。

margin:0
padding:0

答案 4 :(得分:0)

只需添加此规则即可重置浏览器的默认边距和ul的默认边距,这会导致导航栏上方出现空白区域:

html, body {
  margin: 0;
}
ul {
 margin: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>My first css program</title>

  <style>
    html,
    body {
      margin: 0;
    }
    
    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;
      margin: 0;
    }
    
    .sb {
      float: left;
    }
  </style>
</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>

答案 5 :(得分:0)

<!DOCTYPE html>
<html>
<head>
<title>My first css program</title>

<style>
body{
margin:0px !important;}
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:0px;
}
.sb{
float:left;
}
</style>
</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>

答案 6 :(得分:0)

  

首先,您想要学习HTML和CSS。继续学习,锻炼,永不停止询问!时间将到来,你可以帮助别人,并继续摇摆:)

其次,您面临的是CSS默认值。至于网站需要工作的很多东西,即使他们没有应用任何CSS。这样做的原因是“外部”CSS(将css文件链接到html文件)是在HTML之后开发的。因此,大多数HTML元素都有默认值,以保证网站不会中断。对于您的具体示例,body元素也具有默认值:

body {
  display: block;
  margin: 8px; /* this is what you do not want */
}

css默认值的正式列表 - https://www.w3schools.com/cssref/css_default_values.asp

有不同的方法可以摆脱默认的css值。在今天的网页中,更有可能添加一个CSS文件,将所有默认值调整为相同的外观,这就是Normalize.css正在做的事情。更激进的是Eric Meyers "CSS Reset",它会删除所有默认样式。

如果您想深入了解此主题,我强烈推荐这个Stack Overflow问题:What is the difference between Normalize.css and Reset CSS?

答案 7 :(得分:-1)

在样式表中添加这些行重置CSS

body,html{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;

}