在同一行对齐元素（动态拉伸整个布局）

我正在使用MVC 4布局视图（html，css）。在同一行对齐元素（动态拉伸整个布局）

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

怎么办？请帮忙，因为我真的很新。

下面是这个例子。对于用户A（可以在菜单栏上看到5个项目）。所有5个项目都很好地排列在页面上。 enter image description here

对于用户B（在菜单栏上只能看到4个项目）。所有4个项目也将很好地安排在页面上。 enter image description here

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

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

来源

2013-05-31 sniggy

所以，你想知道如何创建一个水平菜单？ –

你会用适当的CSS样式来做到这一点。 [w3schools]（http://www.w3schools.com/css/tryit.asp?filename=trycss_float5） –

@SaladinAkara是水平菜单。 – sniggy

这样做最简单也是最常用的方法是通过使用无序列表，并将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将适用于全部无序列表。

但是，这应该把你放在正确的方向。

UPDATE：

从this site，可以使菜单填满整个宽度，像这样：

/* 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-31 08:55:56

谢谢。但是，如何正确对齐？例如，如果5个元素每个都占用整个页面宽度的20％？如果4则25％？问题是页面不会有固定数量的元素，大约有4个取决于控件。 – sniggy

请参阅我的更新。 –

我使用了代码，但菜单栏显示为垂直菜单？ – sniggy

如果你不想固定的宽度，尽量width:auto;

而且这是一个Demo

来源

2013-05-31 08:59:06 geovani075

嗨。我说的宽度实际上是页面宽度。假设页面宽度为100％，那么如何使菜单栏横向在页面上很好地展开？而不是一个接一个地紧密结合在一起？ – sniggy

在同一行对齐元素（动态拉伸整个布局）

回答

相关问题