Question

我正在创建一个按钮链接。概念是链接应具有边界。边境风格将开始。 a:active将为border-style: inset。

当我添加以下代码时，它显示的是我提供的图像。为什么边境不起作用？

<style>

a {
    border-style: outset; text-decoration: none; color: #000;}
a:active {
    border-style: inset; text-decoration: none; color: #000;}

</style>
</head>
<body>

<a href="#divlast">
        <p>Some random text here to check the border's working.</p></a>

<div class="divlast">
        <p>The Last Division</p>
</div>

Answer 1

我认为你有两个问题。

首先，你在你的锚点中放置一个p标签，这会弄乱格式化，我没有看到它的需要。

第二个是你没有为你的边框指定一个完整的样式，这会有所帮助。

我认为这是你想要的结果，是吗？

示例 Here

<强> HTML

<a href="#divlast">
    Some random text here to check the border's working.
</a>
<div class="divlast">
    <p>The Last Division</p>
</div>

<强> CSS

a {
    border:3px solid pink;
    border-style: outset; text-decoration: none; color: #000;
}
a:active {
    border-style: inset; text-decoration: none; color: #000;
}

Answer 2

边框适用于“块”类型元素，因此您必须将某种形式的块格式应用于a标记

例如：

<强> CSS

a {
    border-style: outset; 
    text-decoration: none; 
    color: #000;
    display: inline-block;
}

a:hover {
    border-style: inset; 
    text-decoration: none; 
    color: #000;
}

JSfiddle Demo

Answer 3

你可以这样做：

JSFiddle http://jsfiddle.net/WK3XJ/1/

<强> HTML

<a href="#divlast">
        Some random text here to check the border's working.</a>

<div class="divlast">
    <p>The Last Division</p>
</div>

<强> CSS

a {
    border: solid 3px green;
    border-style: outset;
    text-decoration: none;
    color: #000;
}
a:active {
    border: solid 3px green;
    border-style: inset;
    text-decoration: none;
    color: #000;
}

Answer 4

您可以从链接中删除p标记。

<a href="#divlast">
   Some random text here to check the border's working.
</a>

默认情况下，元素是内联元素，但您可能希望将其呈现为块元素。

a {
    display: block; border-style: outset; text-decoration: none; color: #000;}
a:active {
    border-style: inset; text-decoration: none; color: #000;}

您不应将块元素添加到内联元素中。

链接边界的代码不是理想的方式

4 个答案: