间距导航菜单

Question

我在调整大小或间隔导航菜单时遇到问题，如下图所示。如果有任何机构知道如何，请通知我。我只想调整导航菜单框的大小，使第一个变得像第二个一样（将其调整得更小）。

HTML

<!--MENU-->
    <nav id = "main-nav-menu">
      <ul class="sf-menu">
        <li class="active"><a href="index.html">Home</a>

        <li><a href="about-us.html">ABOUT US</a> 
        </li>
        <li> <a href="services.html">SERVICES</a>
        </li>
        <li><a href="products.html">OUR PRODUCTS</a>
        </li>
        <li><a href="equipments.html">OUR EQUIPMENTS</a>
        </li>
        <li><a href="machine_list.html">MACHINE LIST</a>
        </li>
        <li><a href="contact.html">CONTACT</a>
        </li>
      </ul>
    </nav>
    <!-- end menu -->

CSS

#header .menu select {
border: 1px solid #CCCCCC;
display: block;
left: 4px;
position: relative;
top: 205px;
width: 250px;
}


#header .menu select {
display: block;
width: 200px;
}

Answer 1

这可以通过一些简单的css规则来实现。在样式表或样式块中，如果您不使用样式表，则需要设置最大或最小宽度，以及列表项的填充。 添加如下内容：

li{max-width:60px;padding:4px;}

或

.sf-menu li{max-width:60px;padding:4px;}

或

main-nav-menu ul li{max-width:60px;padding:4px;}

每个菜单项的最大宽度都设置为60px。更改此值以满足您的需求。这意味着所有物品都有标准宽度。您还可以设置固定宽度或最小宽度。

li{min-width:60px;width:100px;max-width:150px;}

你也可以添加填充以保持一致的外观。

li{padding:4px 8px;} /* top & bottom padding of 4px, left & right padding of 8px */

此代码的示例 - http://jsfiddle.net/kcdP4/

希望这会有所帮助