可變寬度選項卡（自動寬度）

我想創建使用CSS而不是圖像的選項卡。我希望標籤自動調整到它們的內容，但我希望它們的最大寬度爲200px。我希望標籤寬度能夠自動調整爲內容，以便標籤具有可變的寬度，但保持20px的左/右填充。任何人都可以解釋如何去做這件事？可變寬度選項卡（自動寬度）

這裏是我的HTML至今：

<div class="tab"> 
TEST 
</div>

我的CSS：

.tab { 
    text-align:center; 
    background:#000; 
    padding:0 20px; 
    max-width:200px; 
    border-radius: 10px 10px 0 0; 
    color:#fff; 
}

And a JSFiddle！

謝謝！

來源

2014-01-14 user3101431

使用display:inline CSS或使在div跨度：

<span class="tab"> 
TEST 
</span>

來源

2014-01-14 19:54:12 cDima

謝謝！我結束了顯示：表格單元格，因爲我想垂直對齊文本，但顯示：內聯也工作。將在6分鐘內接受這個答案。 – user3101431

添加顯示：內聯塊以使其塌縮到所述內容的寬度。

來源

2014-01-14 19:55:16

可變寬度選項卡（自動寬度）

回答

相關問題