0

我正在使用 MVC 4 布局视图（html、css）。

我想做一个在同一行有 6 个元素的菜单栏。但是，我不想固定每个元素的宽度，只是为了确保它们正确对齐。原因是我想用代码控制菜单栏，因为菜单项将对未经授权的用户隐藏。

怎么做到呢？请帮忙，因为我在这方面真的很新。

这是示例。对于用户 A（可以在菜单栏上看到 5 个项目）。所有 5 个项目在页面上排列得很好。 在此处输入图像描述

对于用户 B（在菜单栏上只能看到 4 个项目）。所有 4 个项目也将在页面上很好地排列。 在此处输入图像描述

我的意思是整个页面宽度。我不希望元素彼此紧密贴合，同时在后面留下空白空间。

非常感谢您的帮助！谢谢！:D

4

2 回答 2

2

最简单和最常见的方法是使用无序列表，并应用 CSS。这样的事情会做你想要的：

HTML：

<ul>
    <li>Menu item 1</li>
    <li>Menu item 2</li>
    <li>Menu item 3</li>
    <li>Menu item 4</li>
</ul>

CSS：

ul
{
    list-style-type: none; /* removes the bullet points */
}

ul li
{
    display: block; /* makes each item a 'box' */
    float: left; /* makes them stay on the same line */
}

需要额外的样式来从列表中删除边距和填充，并且您需要将类应用于您的列表，因为上面的 CSS 将应用于所有无序列表。

但这应该使您朝着正确的方向前进。

更新：

从此站点，您可以使菜单填充整个宽度，如下所示：

/* this selector could be div#nav instead of nav depending on which tag you wrapped the ul in */
nav {
display: table;
width: 100%;
border-collapse: collapse;
border: none;
}
nav ul {
display: table-row;
}
nav li {
display: table-cell;
margin: 0;
}
于 2013-05-31T08:55:56.807 回答
0

If you don't want fixed width, try width:auto;

And Here is a Demo

于 2013-05-31T08:59:06.650 回答