は、第2のリンクの境界線が個別に他の2回

Question

よし表示されますので、問題は、私は2つの縁取りのリンクを望んでいたということですが、あなたが見ることができるように、思えるそこに2つの余分な境界線がありますコードを調べることで、リンクを2回入力するのは誤りではありませんでしたが、予約リンクに属していました。

編集： 私の説明が十分にはっきりしない場合は別の画像を追加しました。それは私が私が私がdiv要素に問題があると確信しているが、私が試したすべてが失敗した

を取り除きたいということを指してるの長方形です。

HTML：

 <div class="buttons"> 
     <div class="button1"> 
      <a href="explore.html">EXPLORE</a> 
     </div> 
     <div class="button2"> 
      <a href="booking.html">BOOKINGS</a> 
     </div> 
     </div> 

はCSS：

.button1 { 
padding: 0 0 29px 50px; 
letter-spacing: 1px; 
text-transform: uppercase; 
padding: 0 0 29px 0px; 
display: inline-block; 
float:left;} 

.button2 { 
padding: 0 0 29px 0px; 
letter-spacing: 1px; 
text-transform: uppercase; 
padding: 0 0 29px 0px; 
display: inline-block;} 
.buttons a { 
background-color: ffaaaa; 
color: #832430; 
border: 2px solid #832430; 
padding: 14px 25px; 
text-align: center; 
text-decoration: none; 
display: inline-block;} 
.buttons a:hover{ 
background-color: #832430; 
color: white; 
padding: 14px 25px; 
text-align: center; 
text-decoration: none; 
display: inline;} 

Answer 1

ここでは、あなたのコードが固定されています。

• 異なる要素に同じプロパティがある場合は、クラスを使用してください。

• あなたは私が持っているよあなたがそうしたいと思い何からすべての詳細を持っていないプロパティbackground

.btn { 
 
    padding: 0 0 29px 50px; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    padding: 0 0 29px 0; 
 
    display: inline-block; 
 
} 
 

 
.buttons a { 
 
    background-color: #faa; 
 
    color: #832430; 
 
    border: 2px solid #832430; 
 
    padding: 14px 25px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display:block 
 
} 
 

 
.buttons a:hover { 
 
    background-color: #832430; 
 
    color: white; 
 
}

<div class="buttons"> 
 
    <div class="button1 btn"> 
 
    <a href="explore.html">EXPLORE</a> 
 
    </div> 
 
    <div class="button2 btn"> 
 
    <a href="booking.html">BOOKINGS</a> 
 
    </div> 
 
</div>

Answer 2

で#を欠落していました後で更新する。 オプション1：ダブルボーダーを使用したい場合は、ボーダーとボックスシャドウを使用するのが簡単です。 オプション2：この事のためのより簡単なアプローチは、::セレクターの後にそれを研究し、あなたの人生はずっと簡単になります:)

.buttons a { 
 
    background-color: ffaaaa; 
 
    color: #832430; 
 
    border: 2px solid #832430; 
 
    padding: 14px 25px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    box-shadow: 0px 0px 0px 2px silver; /* one line of code for 2nd border */ 
 
    margin: 0 10px; 
 
} 
 

 
.buttons a:hover{ 
 
    background-color: #832430; 
 
    color: white; 
 
    padding: 14px 25px; 
 
}

<div class="buttons"> 
 
    <a class="button" href="explore.html">EXPLORE</a> 
 
    <a class="button" href="booking.html">BOOKINGS</a> 
 
</div>

::セレクタ道

.buttons .button-wrap{ 
 
    position: relative; 
 
    display: inline-block; 
 
    width: auto; 
 
    height: auto; 
 
    margin: 0 10px; 
 
} 
 
.buttons a { 
 
    background-color: ffaaaa; 
 
    color: #832430; 
 
    border: 2px solid #832430; 
 
    padding: 14px 25px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 

 
.buttons a:hover{ 
 
    background-color: #832430; 
 
    color: white; 
 
} 
 

 
.buttons a::after{ 
 
    position: absolute; 
 
    display: inline-block; 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: -6px; 
 
    left: -6px; 
 
    margin: 4px; 
 
    border: 2px solid silver; 
 
}

<div class="buttons"> 
 
    <div class="button-wrap"> 
 
     <a class="button" href="explore.html">EXPLORE</a> 
 
    </div> 
 
    <div class="button-wrap"> 
 
     <a class="button" href="booking.html">BOOKINGS</a> 
 
    </div> 
 
</div>