如何將寬度設置爲auto + 5px？

我想知道，是這樣的，可能嗎？：如何將寬度設置爲auto + 5px？

#test{ 
    background-color: red; 
    width:auto + 5px; 
}

我不希望有一個<div>，正好裝在它與文本的寬度。我希望它是「'文字寬度'+ 5px」。

這可能與CSS？

來源

2012-06-28 Milad R

你將如何獲得'文字寬度'？ 'auto'總是100％的父元素。 – Ashwin

不要使用塊元素，請使用像span這樣的內聯元素。 – poke

@poke：我使用div，因爲我想使用這個div，就像是一個css菜單按鈕（我不想使用預先構建的按鈕，...）我不擅長造型，所以這個是在我腦海中製作菜單按鈕的最佳方式... –

我建議使用填充：

#test { 
    background-color: red; 
    width:auto; 
    padding:0 5px; 
}

這將創建爲5px的右側和左側的填充。頂部和底部將有一個填充0.

來源

2012-06-28 10:38:30

這不會改變div的寬度，它仍然是100％ – slash197

使用填充。

#test{ 
     background-color: red; 
     width:auto; 
     padding: 0px 5px; 
    }

來源

2012-06-28 10:39:05 Danny

這不會改變div的寬度，它仍然是100％ – slash197

@ slash197：看起來這是正確的答案。 – Danny

@丹尼 - 我也看到了，你和裏克的回答完全一樣。 – Ashwin

div的自動寬度爲100％。如果你只需要其內容的寬度使用float: left/right

#test { 
    float: left/right; 
    background-color: red; 
    padding-left: 5px; 
    /* OR */ 
    padding-right: 5px; 
}

來源

2012-06-28 10:39:09 slash197

如果你想達到像width:auto + 5px，那麼你將不得不使用樣式表語言如sass，compass等

如果你想有多餘的空格圍繞您的文本，然後你可以使用填充如下 -

#test { 
    padding:5px; //for all top, right, bottom, left 
    OR 
    padding:5px 3px; //5px for top, bottom and 3px for left right 
    OR 
    padding:5px 3px 4px; //5px for top, 3px for left and right and 4px for bottom 
    OR 
    padding: 5px 4px 3px 2px; //goes this way, top-right-bottom-left 
}

來源

2012-06-28 10:41:08 Ashwin

我懷疑sass或類似的將能夠做到這一點。它需要能夠計算文本的確切寬度，並且完全取決於字體，字體大小，渲染方法，縮放等。 – poke

我無法知道獲取寬度文本。談論這件事是假想的和毫無意義的。 – Ashwin

那你爲什麼說sass能做到呢？對他們來說是不可能的;如果有的話可以使用JavaScript來實現這樣的計算。 – poke

如何將寬度設置爲auto + 5px？

回答

相關問題