等间距的全角菜单？

Question

我有一个带有四个选项的菜单，我需要坐在下面的图像中，如下所示：

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

这些大小是自适应的，因此我将动态放置菜单项。 我的问题是如何计算菜单宽度，以便间距等于Menu1和Menu4并满足图像边缘。

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

在这里摆弄

但是，如果菜单项的宽度几乎相同，那么使用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}