<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
*{margin: 0px;padding: 0px;}
a{text-decoration: none;}
.wrap{width: 440px;height: 90px;margin: 30px auto;}
.wrap a{float: left;height: 40px;padding: 0 15px;line-height: 40px;border: 2px solid blue;margin-right:-2px;}
a:hover{border-color: red;}
</style>
</head>
<body>
<div class="wrap">
<a href="">aaa</a>
<a href="">bbbbb</a>
<a href="">ccc</a>
<a href="">ddddddd</a>
<a href="">eeeee</a>
<a href="">ffff</a>
</div>
</body>
</html> the effect is as follows:
:
is there any way to do this? thank you ~