這個div的邊框是浮線而不是實際的邊框

Question

我可能會缺少一些基本的東西。它是如此簡單：

.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

移動從錨點到div類會使它（境）消失一起。

Answer 1

將<a>標籤放在<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">浮出來吧......

因此，嘗試將其刪除，並與display: inline-block;取代它，因爲div是塊組件，並把它放在一個聯組件（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

從技術上講，將<a>放置在<div>的內部是在其他答案中描述的語義上正確的方法。

如果您確實需要這樣做，您需要將<a>標記的顯示從inline更改爲inline-block。