奇怪的问题给我的菜单项权利

Question

我试图将桌面设计转变为平板电脑设计。

我现在正在为768px进行媒体查询，因此我的菜单包含768px，我想将margin-left和margin-right提供给我的菜单项。

当我提供margin-left时，一切正常，但margin-right不起作用，我的最后一个菜单项是我的搜索输入，显示在我的768px之外。

有人可以帮我理解发生的事情吗？到目前为止我所拥有的：

我的JSFiddle问题：http://jsfiddle.net/ra3zc/3/

我的HTML：

<section id="menu-container">
    <nav id="menu">
        <ul>    
            <li><a href="#">Link 1</a>
                <ul>
                    <li style="border-top:none;"><a href="#">Link 1.1</a></li>
                    <li><a href="#">Link 1.2</a></li>
                </ul>
            </li> 
            <li><a href="#">Link 2</a>
                <ul>
                    <li style="border-top:none;"><a href="#">Link 2.1</a></li>
                    <li><a href="#">Link 2.2</a></li>
                </ul>
            </li> 
            <li><a href="#">Link 3</a>
                <ul>
                    <li style="border-top:none;"><a href="#">Link 3.1</a></li>
                    <li><a href="#">Link 3.2</a></li>
                </ul>
            </li> 
            <li id="search_list">
                <form id="search">
                    <input name="q" type="text" size="40" placeholder="Search..." />
                    <button type="submit"><i class="fa fa-search"></i></button>
                </form>
            </li>
        </ul>
    </nav>  
</section>

我的CSS有点长，所以我不把它放在这里。

Answer 1

#menu ul 
{
    list-style-type: none;
    width: 768px;   
    margin-left: 5px;
}

您的#menu ul不应该是768px，因为它占用了所有#menu范围，尝试将其更改为500px或更低。

Answer 2

下次尝试基础5，在您的情况下，它对平板电脑和移动版本非常有用。