0

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

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

这些尺寸是响应式的，所以我动态地定位菜单项。我的问题是如何计算菜单宽度，使间距相等，以及 Menu1 和 Menu4 满足图像边缘。

4

5 回答 5

2

在给定时间，您是否会拥有超过 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%;
}
于 2012-10-30T11:19:29.307 回答
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/

于 2012-10-30T11:22:19.770 回答
1

虽然您可以使用 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 可能会更好。

于 2012-10-30T12:12:42.580 回答
1

您可以完全在 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%;
}
于 2012-10-30T14:46:30.633 回答
0

如果您的布局是响应式的，则将您的菜单项设置为每个 25% 的宽度，然后将最后一个子项设置为 text-align:right 以便它与右边距对齐。

#Menu ul li {text-align:left;display:inline-block;width:25%}
#Menu ul li:last-child {text-align:right}
于 2012-10-30T11:23:28.573 回答