圓圈鍵CSS

我是一個初學者，很困惑，因爲當我給相同的寬度和高度與邊界半徑div標籤：50％，它總是變成圓形。但帶有標籤a以防我想製作一個圓形按鈕，它不會那樣工作。這是當我嘗試使圓形邊框按鈕可點擊時。圓圈鍵CSS

<a class="btn" href="#"><i class="ion-ios-arrow-down"></i></a> 


.btn { 
    height: 300px; 
    width: 300px; 
    border-radius: 50%; 
    border: 1px solid red; 
}

來源

2016-07-12 pexichdu

你能否解釋一下它..？ – Pranjal

閱讀關於'inline'和'block'級別的元素，你將能夠回答你自己的問題） –

對於div標籤之間的區別已經有通過瀏覽器給出的默認屬性display:block。對於定位標記，瀏覽器沒有顯示屬性。你需要添加顯示屬性。這就是爲什麼使用display:block或顯示：inline- block。它會工作。

.btn { 
 
    display:block; 
 
    height: 300px; 
 
    width: 300px; 
 
    border-radius: 50%; 
 
    border: 1px solid red; 
 
    
 
}

<a class="btn" href="#"><i class="ion-ios-arrow-down"></i></a>

來源

2016-07-12 05:57:02

添加display: block;。這是一個<div>標籤和標籤<a>

.btn { 
     display: block; 
     height: 300px; 
     width: 300px; 
     border-radius: 50%; 
     border: 1px solid red; 
    }

來源

2016-07-12 05:50:15

.round-button { 
 
    width:25%; 
 
} 
 
.round-button-circle { 
 
    width: 100%; 
 
    height:0; 
 
    padding-bottom: 100%; 
 
    border-radius: 50%; 
 
    border:10px solid #cfdcec; 
 
    overflow:hidden; 
 
     
 
    background: #4679BD; 
 
    box-shadow: 0 0 3px gray; 
 
} 
 
.round-button-circle:hover { 
 
    background:#30588e; 
 
} 
 
.round-button a { 
 
    display:block; 
 
    float:left; 
 
    width:100%; 
 
    padding-top:50%; 
 
    padding-bottom:50%; 
 
    line-height:1em; 
 
    margin-top:-0.5em; 
 
     
 
    text-align:center; 
 
    color:#e2eaf3; 
 
    font-family:Verdana; 
 
    font-size:1.2em; 
 
    font-weight:bold; 
 
    text-decoration:none; 
 
}

<div class="round-button"><div class="round-button-circle"><a href="http://example.com" class="round-button">Button!!</a></div></div>

如果你想的jsfiddle參考click here

來源

2016-07-12 05:58:12

使用這個CSS。

.roundbutton{ 
     display:block; 
     height: 300px; 
     width: 300px; 
     border-radius: 50%; 
     border: 1px solid red; 

    }

來源

2016-07-27 04:13:39

雖然我可以看到一個被接受的答案和其他很好的答案，但想到分享我做了什麼來解決這個問題（只有一行）。

CSS（創建類）：

.circle { 
    border-radius: 50%; 
}

HTML（補充說明CSS類到我的按鈕）：

<a class="button circle button-energized ion-paper-airplane"></a>

那麼容易吧？

注意：我實際上做的是正確使用離子類只有一行css。

見結果你自己對這個的jsfiddle：

https://jsfiddle.net/nikdtu/cnx48u43/

來源

2016-12-10 05:52:11

HTML：

<div class="bool-answer"> 
    <div class="answer">Nej</div> 
</div>

CSS：

.bool-answer { 
    border-radius: 50%; 
    width: 100px; 
    height: 100px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

來源

2017-08-16 10:19:08 lesyk

回答

相關問題