Question

我正在创建一个简单的电子书网站，以便我和我的朋友可以访问我的电子书和所有爵士乐。我的菜单末尾有这个黑盒子或空格，我不知道为什么。我尝试调整整体菜单的大小，但我不知道任何可以让盒子像主页按钮一样的方式。它很完美，附近没有空间。就在最后。 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：

body{
background-color:#0e0d0d;
}

@font-face {
font-family: Lato-Light;
src: url('Lato-Light.ttf');
}

@font-face {
font-family: Lato-Light-Italic;
src: url('Lato-LightItalic.ttf');
}

img.logo {
width: 500px;
height: auto;
display: block;
margin-left: auto;
margin-top:60px;
margin-right: auto
}

div.br {
margin-top:60px;
}

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

ul li{
padding:0px;
margin:0px;
display: inline-block;
position: relative;
line-height: 21px;
text-align: center;
}

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

ul li a:hover{
color: #000000;
background: #f9a724;
}

ul li ul.dropdown1 {
min-width: 150px; /* Set width of the dropdown */
max-width:350px;
background: #000000;
display: none;
position: absolute;
z-index: 999;
}

ul li ul.dropdown2 {
min-width: 150px; /* Set width of the dropdown */
max-width:200px;
background: #000000;
display: none;
position: absolute;
z-index: 999;
}

ul li:hover ul.dropdown1 {
display: block; /* Display the dropdown */
}

ul li ul.dropdown1 li {
display: block;
}

ul li:hover ul.dropdown2 {
display: block; /* Display the dropdown */
}

ul li ul.dropdown2 li {
display: block;
}

div.content {
width:535px;
background: #000000;
margin-left:auto;
margin-right:auto;
}

p {
color: #f9a724;
text-align:center;
word-wrap: break-word;
margin-right:50px;
margin-left:50px;
font-family:Lato-Light;
}

https://jsfiddle.net/mncvhoz9/

Answer 1

只需在文件中添加以下CSS

即可

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

Answer 2

它不是黑盒子，它是你的ul元素的背景你可以简单地改变ul的宽度来移除这个黑色区域：

func actioncall () {
    let loginPageView = self.storyboard?.instantiateViewControllerWithIdentifier("LoginPageID") as! ViewController
    self.navigationController?.pushViewController(loginPageView, animated: true)
}

Answer 3

ul有上边距和下边距，因为它有黑色空间。所以这样做会有效。

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

工作Demo

Answer 4

如果你不需要减小ul的宽度，那么你应该设置li的宽度。

 ul li{   width: 103px; }

Answer 5

如果您不想担心缩小到精确的像素数，和/或使每个项目的宽度相同，您应该可以添加以下声明，但我不是确定所有浏览器版本都支持它的程度（自从我查看它以来已经有一段时间了）：

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

添加到您的代码中的示例：https://jsfiddle.net/nfqs0j0u/

Answer 6

请尝试这个：

这样的Css代码：

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

    }

Demo

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

6 个答案: