Question

我有一个里面有几个ul和li的div。问题是他们很难填补这个空间。要么他们在右侧留下一个很大的差距，要么将一个在uls上推下来。我必须考虑不同的用户有不同大小的屏幕。

我需要让uls灵活，这样无论它们的大小是多大，它们都能更好地覆盖空间。当窗口的大小减小时，我希望lis进行调整。

这可能吗？任何建议将不胜感激。

好的，这是一些代码。你们已经给了我一些想法，让我们看看代码是否有帮助：

<div style="max-width:100%">
       <ul style="list-style-type: none; display: inline-block; *display: inline; zoom: 1">

        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
            </ul>

       <ul style="list-style-type: none; display: inline-block; *display: inline; zoom: 1">
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
            </ul>
            </div>

看，我希望它们彼此相邻，但之后会有差距，如果屏幕发生变化，差距会变得更大......

我在这个页面上有引导程序，但是如何使用？

Answer 1

我得到了一些帮助，谢谢大家。我添加了{宽度：25％}，但由于某种原因，他们并非全都相互排成一行，即使我已将所有内容降低到20％，这应该允许它们全部排成一行......我想知道当div变小时会发生什么，也许媒体查询是要走的路。但是，就目前而言，感谢所有人。

这是我到目前为止所做的：

jdfiddle：http://jsfiddle.net/mbQ5P

 <div style="width:100%">
               <ul style="width:20%; list-style-type: none; display: inline-block; *display: inline; zoom: 1">

            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
                </ul>

           <ul style="width:20%; list-style-type: none; display: inline-block; *display: inline; zoom: 1">
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
                </ul>
                           <ul style="width:20%; list-style-type: none; display: inline-block; *display: inline; zoom: 1">

            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
                </ul>
                           <ul style="width:20%; list-style-type: none; display: inline-block; *display: inline; zoom: 1">

            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
            <li><a href="#">Random Page</a><li>
                </ul>
                </div>

如何将<li>放在灵活的结构中？</li>

1 个答案: