Question

我有一个包含四个选项的菜单，我需要将它们放在图像下方：

----------------------------------------------------------------
|                        This is an image                      |
----------------------------------------------------------------
Menu 1               Menu 2             Menu 3             Menu4

这些大小是响应式的，因此我会动态定位菜单项。我的问题是如何计算菜单宽度，使间距相等，以及菜单4和菜单4满足图像的边缘。

Answer 1

在给定时间，您是否会有超过4个菜单项？如果不是，您可以轻松地将链接包装在无线内，并将<li>宽度分配给每个25％。请参阅以下示例：

<强> HTML

<ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
</ul>

<强> CSS

ul {
    list-style: none;
    margin: 0;
    overflow: hidden;
}

li {
    float: left;
    width: 25%;
}

Answer 2

如果您有固定数量的项目，则可以计算每个项目所需的百分比（如@Chris所示）。

如果菜单项的数量可能不同，您可以使用jQuery来确定宽度：

var imgWidth = $(".img").width();
var itemWidth = imgWidth / $("ul.menu li").length;

$("ul.menu li").width(itemWidth);

这里我得到图像的宽度，然后将宽度除以li元素的数量，然后将此值应用为每个li元素的宽度。

参见演示：http://jsfiddle.net/rwvhG/

就对齐而言，这可以通过CSS完成：

ul li
{
    float:left;
    text-align:center;
}

ul li:first-child
{
    text-align:left;
}

ul li:last-child
{
    text-align:right;
}

参见演示：http://jsfiddle.net/rwvhG/1/

Answer 3

虽然您可以使用css设置25％的宽度，但如果菜单项文本宽度非常不同，这将无法正常工作。如果您希望它非常精确，请尝试以下方法：

HTML

<ul class="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
</ul>

的JavaScript

$(document).ready( function( ) {

    var widths = 0;
    var items = $(".menu > li");
    var menu_width = items.eq(0).parent().width();

    // total width of all existing li
    items.each( function( ) {
        widths += $(this).width( );
    });        

    var gap = parseInt( ( menu_width - widths ) / ( items.length - 1 ) );

    // set widths of list items except for last one. Last li gets pushed to edge
    items.slice( 0, -1 ).each( function( ) { 
        $(this).width( $(this).width() + gap );
    });
});

小提琴here

但是，如果菜单项的宽度几乎相同，那么使用CSS可能会更好。

Answer 4

你可以完全用CSS

完成

选中演示：http://jsfiddle.net/Gv7fZ/

HTML：

<div class="outer">
    <img src="<put-image-url-here>">
    <div class="menu">
        <div class="menuitem">Menu 1</div>
        <div class="menuitem">Menu 2</div>
        <div class="menuitem">Menu 3</div>
        <div class="menuitem">Menu 4</div>
    </div>
</div>

CSS：

.outer {
    margin: auto;    
    display: table-cell;
}
.menuitem {
    float: left;
    text-align: center;
    width: 33%;
}
.menuitem:first-child {
    text-align: left;  
    width: 16%;    
}
.menuitem:last-child {
    float: right;
    text-align: right;   
    width: 16%;
}

Answer 5

如果您的布局有响应，则将菜单项设置为每个25％的宽度，然后将最后一个子项设置为text-align：right，使其与右边距对齐。

#Menu ul li {text-align:left;display:inline-block;width:25%}
#Menu ul li:last-child {text-align:right}

等间距，全宽菜单？

5 个答案: