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％，

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

Answer 1

您需要的是display: inline-block;

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

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

1 个答案: