1. 首页
  2. 问答
  3. 如何让div自动设置它自己的宽度？

如何让div自动设置它自己的宽度？

2011-04-19 77 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

相关问题

 相关问题