Question

我想删除中间的红线＆＃34;谷歌链接＆＃34;但我仍然希望边框颜色为红色。我该怎么做？这是代码：

<!doctype html>
<html>
<head>
<title>Website</title>
</head>
<body>
 <style>
 a{
    text-decoration:none;
    color:white;
    font-weight:bold;
    font-family:tahoma;
    background:black;
    padding-top:2px;
    padding-right:0px;
    padding-bottom:3px;
    padding-left:0px;
    border:1px solid red;
    margin-left:0px;}
 </style>
 <a href="https://www.google.co.in">google</a><a href="https://www.google.co.in">google</a><a href="https://www.google.co.in">google</a><a href="https://www.google.co.in">google</a><a href="https://www.google.co.in">google</a>
 </body>
 </html>

Answer 1

您可以为每个a元素设置单独的边框属性，如下所示：

a{
    text-decoration:none;
    color:white;
    font-weight:bold;
    font-family:tahoma;
    background:black;
    padding-top:2px;
    padding-right:10px;
    padding-bottom:3px;
    padding-left:0px;
    border-bottom: 1px solid red;
    border-top: 1px solid red;
    margin-left:0px;
}

a:last-child{
    border-right:solid 1px red;
}

a:first-child{       
    border-left:solid 1px red;
}

fiddle

Answer 2

您可以尝试以下代码：

Demo

Demo 2

<div style="border:1px solid red;">
  <a href="https://www.google.co.in">google</a>
  <a href="https://www.google.co.in">google</a>
  <a href="https://www.google.co.in">google</a>
  <a href="https://www.google.co.in">google</a>
  <a href="https://www.google.co.in">google</a>
<div>

Answer 3

您应该使用伪类并从a。

中删除左右边框

a {
    border-right:none;
    border-left:none;
}
a:last-child {
    border-right: 1px solid red;
}
a:first-child {
    border-left: 1px solid red;
}

See here for a demo

Answer 4

在你的锚标记周围包裹div并将边框设置为该div。

<div id="wrap">
    <a href="https://www.google.co.in">google</a>
    <a href="https://www.google.co.in">google</a>
    <a href="https://www.google.co.in">google</a>
    <a href="https://www.google.co.in">google</a>
    <a href="https://www.google.co.in">google</a>
</div>

使用宽度与锚标签一样大的display:inline-block;。

查看 this fiddle

Answer 5

边框颜色会帮助你

Fiddle

代码：

 a{
    text-decoration:none;
    color:white;
    font-weight:bold;
    font-family:tahoma;
    background:black;
    padding-top:2px;
    padding-right:0px;
    padding-bottom:3px;
    padding-left:0px;    
    margin-left:0px; 
    border-color:red;
}

多个锚标签

5 个答案: