HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test Menu</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<a href="index.html"><div id="home">Home</div></a>
<a href="about.html"><div id="about">About Us</div></a>
<a href="contact.html"><div id="contact">Contact</div></a>
</body>
</html>
样式表.css:
div {
background-color: #B3B3B3;
transition: background-color 0.5s ease;
display:inline;
font-size:20px;
padding:15px;
padding-bottom:5px;
padding-right:7px;
padding-left:7px;
border:2px solid black;
color:black;
position:relative;
}
a{
text-decoration:none;
}
.active {
background-color:#556677;
}
脚本.js:
$(document).ready(function(){
//hover menu
$('div').hover(function(){
$(this).addClass('active');
},function(){
$(this).removeClass('active');
});
});
如果你要运行它，它看起来像 this .但是，我想要那样，但没有任何空白。我意识到 float:left;会解决这个问题，但我不想要最左边的空白，我希望边框重叠(即它不会连接在一起并在边缘变成 4px)
感谢您的所有帮助!
编辑:非常感谢大家的帮助，我现在更了解我的问题以及如何解决它!
最佳答案
这看起来很难看，但试试这个，注意每个 <a> 都没有换行符
<a href="index.html"><div id="home">Home</div></a><a href="about.html"><div id="about">About Us</div></a><a href="contact.html"><div id="contact">Contact</div></a>
关于jquery - 每个 div 之间的空白不会消失 [CSS]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22086999/