0

我对定位和可变宽度有疑问。我用了：

*{
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放在同一行而不使用固定宽度，但使用可变宽度，因此我可以灵活地添加更多文本，并且宽度会在此基础上增加并在我删除它们时减少。我该怎么做？谢谢！

4

1 回答 1

0

你需要的是display: inline-block;

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

于 2013-09-06T16:12:21.507 回答