Answers:
解决方案是将设置div
为display: inline-block
。
span
或a div
或ul
其他任何东西,重要的部分是您想要最小宽度的容器具有CSS属性display: inline-block
display: inline-block
设置好属性,margin: 0 auto;
将无法按预期工作。在这种情况下,如果父容器具有text-align: center;
该inline-block
元素,则该元素将水平居中。
inline-block
不适用于我,但inline-flex
DID。
您需要一个具有CSS所谓的“缩小至适合宽度”的块元素,而规范并未提供一种获得这种效果的简便方法。在CSS2中,缩小以适应不是目标,而是意味着处理浏览器“必须”凭空获得宽度的情况。这些情况是:
没有指定宽度时。我听说他们想在CSS3中添加您想要的东西。现在,请使用上述方法之一。
不直接公开功能的决定似乎很奇怪,但是有充分的理由。它是昂贵的。缩小到适合表示至少要格式化两次:在知道元素的宽度之前,不能开始格式化元素,并且无法计算没有通过整个内容的宽度。另外,人们并不需要像人们想像中那样频繁地使用“缩小以适合”元素。为什么您的桌子周围需要额外的div?也许表格标题就是您所需要的。
inline-block
的正是为此而设计的,可以完美地解决问题。
content-box, max-content, min-content, available, fit-content, auto
fit-content
关键字(首次写此答案时不存在,并且仍未完全支持)使您可以将“缩小以适合”大小应用于元素,从而消除了此处建议的任何技巧。幸运的是仅以支持为目标的浏览器。但是+1;这些仍然有用!
float
做了我需要做的事!
我认为使用
display: inline-block;
可以,但是我不确定浏览器的兼容性。
另一个解决方案是将您的包裹div
在另一个div
(如果您想保持块的行为):
HTML:
<div>
<div class="yourdiv">
content
</div>
</div>
CSS:
.yourdiv
{
display: inline;
}
*display: inline; *zoom: 1;
。我没有针对这种特殊情况进行测试,但过去我一直发现hasLayout hack仅对于IE7或IE7模式下的IE8(或怪异的IE8!)才需要。
inline-block
在IE 7中启用
display: inline-block
为您的元素增加了余量。
我建议这样做:
#element {
display: table; /* IE8+ and all other modern browsers */
}
奖励:现在,您#element
只需添加,就可以轻松地将新奇的样式居中margin: 0 auto
。
position: absolute
对于<IE8,必须带有条件注释。
display: inline-block
不会增加任何边距。但是CSS处理在内联元素之间显示的空格。
position: absolute
您可以尝试fit-content
(CSS3):
div {
width: fit-content;
/* To adjust the height as well */
height: fit-content;
}
对我有用的是:
display: table;
在div
。(在Firefox和Google Chrome上测试)。
border-collapse: separate;
样式。它是许多浏览器的默认设置,但通常是css框架(如引导程序)将其重置为collapse
。
有两个更好的解决方案
display: inline-block;
要么
display: table;
这两个中的display:table;
一个更好,因为display: inline-block;
增加了额外的余量。
因为display:inline-block;
您可以使用负边距方法来修复多余的空间
display:table
更好吗?
display:table
将元素保留在“块”格式化上下文中,因此您可以照常使用边距等控制其位置。display:-inline-*
另一方面,将元素放入Inline格式设置上下文中,导致浏览器围绕该元素创建匿名块包装器,其中包含带有继承的font / line-height设置的行框,然后将块插入该行框中(对齐(默认情况下,默认为垂直)。这涉及更多的“魔术”,因此有潜在的惊喜。
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
-moz-inline-stack
您的问题的答案在于未来我的朋友...
即“ intrinsic”随CSS3最新更新一起发布
width: intrinsic;
不幸的是IE落后了,所以它还不支持它
有关它的更多信息:CSS本质和外部大小调整模块级别3,可以使用吗?:内部和外部调整大小。
现在,您必须满意<span>
或<div>
设置为
display: inline-block;
width:1px;
white-space: nowrap;
对我来说很好:)
好的,在许多情况下,您甚至不需要执行默认情况下div具有的功能height
和width
auto的功能,但是如果不是您的情况,则应用inline-block
显示将为您工作...看一下我为您创建的代码你在找什么:
div {
display: inline-block;
}
<div>
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
<td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
</tr>
</table>
</div>
display: flex;
您可以inline-block
用作@ user473598,但要注意较旧的浏览器。
/* Your're working with */
display: inline-block;
/* For IE 7 */
zoom: 1;
*display: inline;
/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;
Mozilla根本不支持内联阻止,但是它们具有-moz-inline-stack
大致相同的功能
一些围绕inline-block
显示属性的跨浏览器:https :
//css-tricks.com/snippets/css/cross-browser-inline-block/
您可以在以下网址看到一些具有此属性的测试:https : //robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
inline-block
从3.0(2008)开始支持。来源:developer.mozilla.org/en-US/docs/Web/CSS/...
只需将样式放入CSS文件
div {
width: fit-content;
}
-moz-fit-content
FF,大概其他供应商前缀将允许它们自己使用...
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div id="content_lalala">
this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
</div>
</td>
</tr>
</table>
我知道人们有时不喜欢表格,但是我得告诉你,我尝试了CSS内联黑客技术,他们在某些div中有点用,但在另一些div中却没有,因此,将扩展的div括在其中确实很容易一个表...并且...它可以具有或不具有inline属性,但该表仍将保留内容的总宽度。=)
工作演示在这里-
.floating-box {
display:-moz-inline-stack;
display: inline-block;
width: fit-content;
height: fit-content;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
<h2>The Way is using inline-block</h2>
Supporting elements are also added in CSS.
<div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
</div>
我的CSS3 flexbox解决方案有两种形式:顶部的一个行为就像一个span,底部的一个行为像div,在包装器的帮助下占据所有宽度。它们的类分别是“ top”,“ bottom”和“ bottomwrapper”。
body {
font-family: sans-serif;
}
.top {
display: -webkit-inline-flex;
display: inline-flex;
}
.top, .bottom {
background-color: #3F3;
border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
display: -webkit-flex;
display: flex;
}
table {
border-collapse: collapse;
}
table, th, td {
width: 280px;
border: 1px solid #666;
}
th {
background-color: #282;
color: #FFF;
}
td {
color: #444;
}
th, td {
padding: 0 4px 0 4px;
}
Is this
<div class="top">
<table>
<tr>
<th>OS</th>
<th>Version</th>
</tr>
<tr>
<td>OpenBSD</td>
<td>5.7</td>
</tr>
<tr>
<td>Windows</td>
<td>Please upgrade to 10!</td>
</tr>
</table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
<div class="bottom">
<table>
<tr>
<th>OS</th>
<th>Version</th>
</tr>
<tr>
<td>OpenBSD</td>
<td>5.7</td>
</tr>
<tr>
<td>Windows</td>
<td>Please upgrade to 10!</td>
</tr>
</table>
</div>
</div>
this is what you are looking for.
display: inline-flex;
。顺便说一句,Chrome 62,firefox 57和safari 11无需前缀即可使用
<div class="parentDiv" style="display:inline-block">
// HTML elements
</div>
这将使父div宽度与最大元素宽度相同。
您可以尝试此代码。请遵循CSS部分中的代码。
div {
display: inline-block;
padding: 2vw;
background-color: green;
}
table {
width: 70vw;
background-color: white;
}
<div>
<table border="colapsed">
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
<tr>
<td>Apple</td>
<td>Banana</td>
<td>Strawberry</td>
</tr>
</table>
</div>
我已经解决了一个类似的问题(display: inline-block
由于该项目居中,所以我不想使用该问题),方法是在span
标签内添加一个div
标签,然后将CSS格式从外部div
标签移动到新的内部span
标签。如果display: inline block
这不是您的合适答案,请将其扔掉作为另一个替代想法。
如果您有容器断行,几个小时后寻找一个好的CSS解决方案,但没有找到,我现在改用 jQuery:
$('button').click(function(){
$('nav ul').each(function(){
$parent = $(this).parent();
$parent.width( $(this).width() );
});
});
nav {
display: inline-block;
text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
display: inline;
}
/* needed style */
ul {
padding: 0;
}
body {
width: 420px;
}
/* just style */
body {
background: #ddd;
margin: 1em auto;
}
button {
display: block;
}
nav {
background: #bbb;
margin: 1rem auto;
padding: 0.5rem;
}
li {
display: inline-block;
width: 40px;
height: 20px;
border: solid thin #777;
margin: 4px;
background: #999;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>fix</button>
<nav>
<ul>
<li>3</li>
<li>.</li>
<li>1</li>
<li>4</li>
</ul>
</nav>
<nav>
<ul>
<li>3</li>
<li>.</li>
<li>1</li>
<li>4</li>
<li>1</li>
<li>5</li>
<li>9</li>
<li>2</li>
<li>6</li>
<li>5</li>
<li>3</li>
<li>5</li>
</ul>
</nav>
修订(如果您有多个子代,则可以使用):您可以使用jQuery(请查看JSFiddle链接)
var d= $('div');
var w;
d.children().each(function(){
w = w + $(this).outerWidth();
d.css('width', w + 'px')
});
不要忘记包括jQuery ...