Question

我仍然是一个CSS新手。多年来我一直使用嵌套表管理我的布局，我知道所有CSS人都会告诉我它是邪恶的。多年来我一直在使用CSS，但从一开始我就无法按照我想要的方式控制我的布局。

简而言之，我想要的是一个＆lt; div＆gt;这只会和它的内容一样宽。我不想设置它的大小。我希望它只是与其动态创建的内容一样宽。

表完美地完成了这一点。使用＆lt; div＆gt;它总是似乎做了我想要的事情。没有“溢出”选项可以满足我的需求。

典型的例子是当我想创建一个整页的柱状布局时，左栏包含导航链接，右栏包含内容。我希望左列与导航链接一样宽。不多也不少。（导航链接不是静态的;它们是动态创建的，并且可以随时改变大小/长度）。右边（“内容”）列应该是剩下的东西。最重要的是，当我使浏览器屏幕更宽或更窄时，我希望左列仍然与导航链接一样宽：不多也不少。如果浏览器的宽度太窄，我希望内容根据需要自动换行。在任何情况下，我都不希望文本被遮挡或超出定义的列。

简而言之，我想要一个＆lt; div＆gt;无需使用表格即可与表格一起使用。当然，CSS专家。这可以做到....对吗？我在其他论坛上问了这个问题，但从未收到过可接受的答案。

或者采取一个有点相关的简单示例（也许这个很容易）：

<ul style="background: orange;">
   <li>one</li>
   <li>two</li>
   <li>three</li>
</ul>

整个事情与浏览器屏幕一样宽。但我希望它只与最长的元素一样宽。我如何用CSS做到这一点？我可以将整个事物放在像这样的表中

<table border=0 cellpadding=0 cellspacing=0><tr><td>
<ul style="background: orange;">
   <li>one</li>
   <li>two</li>
   <li>three</li>
</ul>
</td></tr></table>

......它做我想要的。我如何使用CSS而不是使用那些“邪恶”表？

我试过miku的例子它不起作用（我希望它做什么）。

如果我将超长导航线作为

之类的长字符串

 an&nbps;extra&nbps;long&nbps;navigation&nbps;link&nbps;goes&nbps;here&nbps;-&nbps;this&nbps;could&nbps;even&nbps;be&nbps;an&nbps;image!

我希望左侧导航侧根据需要进行扩展。我不想要最大宽度。使用上面的示例，超长行将被“main”div遮挡。

此外，“main”div应该是浏览器宽度的其余部分，在这种情况下，它只有内部文本的宽度。

Answer 1

不完全确定您的问题。我明白，你想拥有一个最大宽度的动态左侧边栏。如果侧边栏中的某些文字太长，则应将其包裹起来。下面是代码和我想象解决方案的截图：

补充工具栏将与中最长的链接（或某物）一样宽（在下面的示例中，其中有一个列表）
如果侧边栏中的某些内容超出max-width属性指定的最大值（此处为：200px），则会被包装。
主要内容占用剩余宽度。

Example A

调整#main div的大小（通过调整浏览器窗口大小）可以通过overflow:hidden工作。

Example B

<html><head></head><body>

<div id="sidebar-left" 
    style="background:#EFEFEF; max-width:200px; float:left">
    <ul>
        <li>Navigation 1</li>
        <li>Navigation 2</li>
        <li>Extra Long Navigation item, 
            that exceeds our limit of 200px - and should be wrapped</li>
    </ul>
</div>

<div id="main" style="background:gray; overflow:hidden;">
    <p>Hello there - main content goes here</p>
</div>

</body></html>

如果您不想要最大尺寸的侧边栏，只需删除max-width属性即可。

Answer 2

使用<span>和display: inline-block。

Answer 3

在包含display: inline-block。

上设置div

示例：http://jsfiddle.net/bVRVb/

正在发生的事情是div默认情况下为display: block，这意味着它们将占用尽可能多的水平空间，并使其周围的所有其他内容显示在它们的上方或下方。使用inline-block时，它们仍然具有固定的形式，但会在它们周围的内容旁边显示内联，并且只占用所需的空间。

Here更全面地了解block vs inline-block。

Answer 4

非常简单：浮动div容器并确保它没有任何宽度属性。无论父级的宽度如何，它都会调整为最长的单词。因为它将按像素调整元素大小，所以我添加了10px的边距。当然，最好让容器做到这一点。

这是为了演示目的而在线：

<body style="width: 500px;">
<ul style="background: none repeat scroll 0pt 0pt orange; float: left;">
<li>one</li>
<li>two</li>
<li style="margin-right: 10px;">reallyreallyreallylongword</li>
</ul>
</body>

CSS div与其内容一样宽

4 个答案: