Div寬度爲100％，但想要一個只有85px寬的錨？

我有一個div在100％，爲了中心的東西我有一個錨標記裏面我只想在85px寬度，但它不認識到這一點，並將擴展基於錨中文本的長度標籤。Div寬度爲100％，但想要一個只有85px寬的錨？

HTML：

<div class="players_names"> 
    <a class="player_name" href="#">34 J. Langenbrunner</a><br /> 
    <a class="team_name" href="#">TORONTO</a> 
</div>

CSS：

.players_names{ 
    width: 100%; 
    position: relative; 
    z-index: 3; 
    text-align: center; 
} 
.players_names a{ 
    color: #fff; 
} 
.players_names a.player_name { 
    width: 85px; 
    font-size: 1.1em; 
    text-align: center; 
    line-height: 1; 
}

爲什麼不能只是做我告訴它做什麼？

來源

2010-10-01 Xtian

默認情況下，a是嵌入式標籤。爲了指定的寬度（或高度），你將需要得到它呈現爲inline-block（或block，因爲你似乎想它自身的留置權反正）：

.players_names a.player_name { 
    width:85px; 
    font-size:1.1em; 
    text-align: center; 
    line-height: 1; 
    display: block; 
}

來源

2010-10-01 00:34:06 pkaeding

a是內嵌級別標記。只有塊級標籤可以設置寬度。如kmfk的評論中所述，您可以在元素的CSS中設置display: block。

來源

2010-10-01 00:27:14

這意味着，您可以手動將錨標記設置爲塊元素顯示。將'display：block'添加到您的樣式中。 – kmfk 2010-10-01 00:28:31

只需更換

players_names a.player_name { 
width: 85px; 
font-size: 1.1em; 
/*text-align: center; - Delete this line */ 
margin: 0 auto; /*Add this line*/ 
display: block; /*Add this too*/ 
line-height: 1; 
}

來源

2010-10-01 00:36:18 Marcus

此外，僅供參考 - div的默認寬度爲100％，因此除非您試圖覆蓋前面的樣式聲明，否則無需聲明它。 – Marcus 2010-10-01 00:56:17

display:inline-block;

或

display:block;

到你的錨，然後你就可以修改它的寬度和他飛行，如果你想隱藏超出的內容，你可以使用：

overflow:hidden;

，或者您可以使用CSS3和扭曲這個詞來你的寬度：

word-wrap: break-word;

希望這有助於

來源

2010-10-01 00:41:26 mklfarha

Div寬度爲100％，但想要一個只有85px寬的錨？

回答

相關問題