css - 如何向元素或容器添加可变宽度，而不是固定宽度？

Question

我对定位和可变宽度有疑问。我用过:

*{
border: 1px dotted blue; /*indicator for where every element are positioned or spaced on the page*/
}

我在所有元素上使用它来查看所有元素的位置，如我在代码注释中所述。我注意到每个元素的默认宽度都是 100%。我想知道如何在同一行上设置可变宽度，而不是固定宽度。这样一来，当我向元素或容器添加更多文本或内容时，我就不必不断更改固定宽度并大量移动元素来对齐它。例如，我的页脚:

<div class="footer">
        <p id="copyright">&copy; 2013 Jaime Penzellna</p>

        <!--SOCIAL MEDIA-->
        <ul id="social_media">
            <li>Facebook</li>
            <li>Instagram</li>
            <li>LinkedIn</li>
            <li>Codecademy</li>
            <li>Flickr</li>
        </ul>
</div>

现在，social_media 标签位于一个宽度为 100% 的新行上，

copyright 标签也是如此。我想要做的是将 p 和 ul 放在同一行上，不使用固定宽度，而是使用可变宽度，这样我就可以灵活地添加更多文本和宽度将基于此增加并在我删除它们时减少。我该怎么做？谢谢!

Answer 1

你需要的是display: inline-block;

检查 http://jsfiddle.net/urRAK/1/