このdivの枠線は実際の枠線ではなく浮動線です

Question

何か基本的なものがありません。それはとても簡単です：アンカーからのdivにクラスを移動

.items { 
 
    float: left; 
 
    font-family: 'Arial', sans-serif; 
 
    text-decoration: none; 
 
    color: black; 
 
    font-size: 30px; 
 
    margin: 25px 30px 0px 0px; 
 
} 
 

 
.langswitch { 
 
    border: 3px solid #86D1DA; 
 
    border-radius: 5px; 
 
}

<a href="#" class="langswitch"> 
 
    <div class="items">Italiano</div> 
 
</a>

jsFiddle

は（ボーダー）が一斉に消えるようになります。

Answer 1

タグは、別の方法ではなく<div>の内側に配置します。

.items{ 
 
    float: left; 
 
    font-family: 'Arial', sans-serif; 
 
    text-decoration: none; 
 
    color: black; 
 
    font-size: 30px; 
 
    margin: 25px 30px 0px 0px ; 
 
} 
 

 
.langswitch{ 
 
    border: 3px solid #86D1DA; 
 
    border-radius: 5px; 
 
}

<div class="items"><a href="#" class="langswitch">Italiano</a></div>

この情報がお役に立てば幸いです。

Answer 2

さて、あなたはどの<a class="lamgswitch">コンテンツを持っていない... float: left;はそれから<div class="items">フロートを作る...

のでdivがブロックであるとして、それを削除し、display: inline-block;と交換してみてくださいコンポーネント、およびあなたはインライン要素（a）の内側に置いた...

.items { 
 
    display: inline-block; 
 
    font-family: 'Arial', sans-serif; 
 
    text-decoration: none; 
 
    color: black; 
 
    font-size: 30px; 
 
    margin: 25px 30px 0px 0px; 
 
} 
 

 
.langswitch { 
 
    border: 3px solid #86D1DA; 
 
    border-radius: 5px; 
 
}

<a href="#" class="langswitch"> 
 
    <div class="items">Italiano</div> 
 
</a>

Answer 3

技術的には、を<div>の内部に配置することは、他の回答に記載されているようにこれを行う意味的に正しい方法です。

本当にこのようにする必要がある場合は、タグの表示をinlineからinline-blockに変更する必要があります。