Html 如何删除菜单末尾的黑色空格/方框_Html_Css_Menu_Box

Html 如何删除菜单末尾的黑色空格/方框

html css menu

Html 如何删除菜单末尾的黑色空格/方框,html,css,menu,box,Html,Css,Menu,Box,我正在制作一个简单的电子书网站，这样我和我的朋友就可以访问我的电子书和所有的爵士乐。我的菜单末尾有一个黑框或空格，我不知道为什么。我试着调整整个菜单的大小，但我不知道有什么方法可以让这个框像主页按钮一样工作。它很完美，附近没有空间。就在最后。html和css供参考 <body> <img src="logo2.png" class="logo" /> <div class="br" /> <ul class="menu"> <li class

我正在制作一个简单的电子书网站，这样我和我的朋友就可以访问我的电子书和所有的爵士乐。我的菜单末尾有一个黑框或空格，我不知道为什么。我试着调整整个菜单的大小，但我不知道有什么方法可以让这个框像主页按钮一样工作。它很完美，附近没有空间。就在最后。html和css供参考

<body>
<img src="logo2.png" class="logo" />
<div class="br" />
<ul class="menu">
<li class="list"><a href="#">Home</a></li>
<li><a href="#">Ebooks</a>
<ul class="dropdown1">
        <li><a href="#">Case studies, theses, academia, educational</a></li>
   </ul>
</li>
<li><a href="#">Extras</a>
   <ul class="dropdown2">
      <li><a href="#">test</a></li>
   </ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Site map</a></li>
</ul>
<div class="content">
<br>
<p>test</p>
<br>
</div>
</body>
</html>

只需在文件中添加以下CSS

ul li a{
    display: block;
    padding: 9px 29.5px;
    color: #f9a724;
    text-decoration: none;
}

它不是一个黑匣子，而是ul元素的背景。您只需更改ul的宽度即可删除此黑色区域：

ul {
  width: 488px;
}

ul

顶部和底部都有边距，因为它有黑色空间。所以像这样给，它会工作的

div.br ul.menu{
  margin-bottom:0px
}

工作

如果不需要减小ul的宽度，则应设置li的宽度

 ul li{   width: 103px; }

如果您不想担心精确的像素数和/或使每个项目具有相同的宽度，您应该能够添加以下声明，尽管我不确定所有浏览器版本对它的支持程度（我已经有一段时间没有研究过了）：

添加到代码中的示例：

请尝试此示例：

Css代码如下：

ul{
    padding:0px;
    font-family:Lato-Light;
   background: #000000;
   color:#f9a724;
   width:488px;
   margin-left:auto;
   margin-right:auto;

    }

我不知道是哪个黑框，我看到的只是整个页面有黑色背景，你能突出显示你正在谈论的框吗？有一个webm来说明它。谢谢。改为501px似乎已经解决了这个问题。但你是对的。还有康奈索，高兴吗？更改了名称。

ul {
  display: table;
}
li {
  display: table-cell;
}

ul{
    padding:0px;
    font-family:Lato-Light;
   background: #000000;
   color:#f9a724;
   width:488px;
   margin-left:auto;
   margin-right:auto;

    }