Menu
I am trying to create a menu using anchor tags, and they should butt up next to each other, so related links can be connected with a border. Here is some example code:
<html>
<head>
<style type="text/css">
a {
border: 1px solid #939393;
margin: 15px;
padding: 8px;
}
a:hover {
border-color: #111;
}
a.collapse-left {
border-left-width: 0px;
margin-left: 0px;
}
a.collapse-right {
border-right-width: 0px;
margin-right: 0px;
}
</style>
</head>
<body>
<div class="body">
<a href="#" class="collapse-right primary">This is</a>
<a href="#" class="collapse-right collapse-left click">A group</a>
<a href="#" class="collapse-left hover">Of Three</a>
<a href="#" class="">I am by myself</a>
<a href="#" class="collapse-right">We are</a>
<a href="#" class="collapse-left">a pair</a>
</div>
</body>
</html>
There is some white space between the buttons that are grouped together. This is caused by the line breaks between <a> tags. These line breaks can be removed, and the problem goes away, but the code is much less readable.
Is it possible to keep the line breaks but not have the white space show up?
329
You should make the boxes into blocks by changing your CSS for <a> to this:
a {
border: 1px solid #939393;
margin: 15px;
padding: 8px;
display: block;
float: left;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
