1

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

在此处输入图像描述

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;
}
4

1 回答 1

0

这可以通过一些简单的 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;}

这些中的每一个都会将菜单项的最大宽度设置为 60 像素。更改此值以满足您的需要。这意味着所有项目都有一个标准宽度。您还可以设置固定宽度或最小宽度。

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/

希望这可以帮助

于 2013-05-02T03:19:34.233 回答