我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
我的布局类似于:
<div>
<table>
</table>
</div>
我希望div只扩展到表的宽度。
当前回答
width:1px;
white-space: nowrap;
对我来说很好:)
其他回答
不知道这将出现在什么上下文中,但我相信CSS样式的属性float(向左或向右)将产生这种效果。另一方面,它也会有其他副作用,例如允许文本在其周围浮动。
如果我错了,请纠正我,我不是100%确定,目前无法自己测试。
width:1px;
white-space: nowrap;
对我来说很好:)
我只需要设置填充:-whateverYouWantpx;
您可以使用内联块作为@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内联堆栈,这几乎是一样的
内联块显示属性周围的一些跨浏览器: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/
如果你有容器破坏了行,在几个小时后寻找一个好的CSS解决方案,但没有找到,我现在使用jQuery代替:
$('按钮').click(函数){$('nav ul').each(函数){$parent=$(this).parent();$parent.width($(this).width());});});导航{显示:内联块;文本对齐:向左;/*不会做任何事,不像一些人可能会猜测的那样*/}上一页{显示:内联;}/*所需样式*/上一页{填充:0;}正文{宽度:420px;}/*恰到好处的风格*/正文{背景:#ddd;边距:1em自动;}按钮{显示:块;}导航{背景:#bbb;边距:1rem自动;衬垫:0.5rem;}李{显示:内联块;宽度:40px;高度:20px;边框:实心薄#777;边距:4px;背景:#999;文本对齐:居中;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button>修复</button><导航><ul><li>3个</li><li></li><li>1个</li><li>4个</li></ul></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>