1. 首頁
  2. 問答
  3. 如何讓div自動設置它自己的寬度？

如何讓div自動設置它自己的寬度？

2011-04-19 74 views
7

怎樣纔可以有一個DIV的寬度行爲像它當float:left設置，但沒有設置浮動？ width:auto似乎沒有做到這一點（鉻）。如何讓div自動設置它自己的寬度？

我試圖得到類似下面的工作...

.center 
{ 
    margin-left: auto; 
    margin-right: auto; 
    width: auto; 
}

來源

2011-04-19 Justin808

回答

32

你可以嘗試display: inline-block，看看是否在你的環境條件。然而，因爲技術要求的寬度值，你將無法使用margin-left: auto & margin-right: auto使其居中。

如果可能的話，使用display: inline-block並在其上的容器設置text-align: center。

<div style="text-align: center"> 
    <div style="display: inline-block;"> 
    This will expand only as far as it needs to 
    </div> 
</div>

查看的jsfiddle工作演示：http://jsfiddle.net/64kY8/

來源

2011-04-19 06:48:03 jessegavin

+0

嗯......正確設置寬度，但邊距不會居中div。 – Justin808 2011-04-19 06:50:18

+0

對，這就是爲什麼我說你必須添加文本對齊：中心到容器div。 – jessegavin 2011-04-19 06:52:37

+0

我想我可以爲「文本對齊」添加另一個包裝，但如果可能，我寧願不必添加另一層嵌套。你知道任何其他方式來居中未知寬度的div嗎？ – Justin808 2011-04-19 06:54:03

3

<div> s爲塊元素。他們採取他們的容器的全部寬度。期。就像<body>或<html>

你上面的規則基本上是這樣做的： div { width:100%; margin:0 auto; }爲100％，是其汽車的價值。

inline-block會的工作，但它不會像一個真正的inline-block元素正是工作。

基本上......你不能沒有設置寬度，其定位做到這一點。

如果你去inline-block的路線，給這一個讀...你可能最終與你的CSS的期望爭取一些意想不到的戰鬥。

<div> 
    <div style="display: table; margin: auto"> 
    This will expand only as far as it needs to 
    </div> 
</div>

這裏：

http://www.brunildo.org/test/InlineBlockLayout.html（靠近下面的MSDN頁面的底部找到鏈接） http://msdn.microsoft.com/en-us/library/ms530751%28v=vs.85%29.aspx

來源

2011-04-19 06:53:01 Dawson

+1

呃..有什麼？ – Dawson 2011-04-19 19:38:51

2

我想這樣的作品現在：

.center 
{ 
    width: fit-content; 
    margin-left: auto; 
    margin-right: auto; 
}

來源

2017-07-24 11:58:10 jiggunjer

+0

http://caniuse.com/#search=fit-content – 2017-09-22 07:27:14

相關問題

 相關問題