CSS水平下拉菜单问题 [英] Problem with CSS Horizontal Dropdown Menu

问题描述

我有两个与CSS水平下拉有关的问题/问题

菜单我希望有人这里可以帮到我。


（1）


我的菜单中心有问题。我从教程中获取了

的代码，但该菜单是齐左左对齐的。不是什么

我想要的。谷歌关于如何集中的后续搜索产生了各种各样的方法来集中处理，但没有一种方法可行。


唯一的方法我能够将菜单置于封闭的

表中是为了在菜单ID上设置margin-left属性来强制

菜单在右边。它有效，但我不喜欢它，因为它是硬编码的b $ b定心。关于如何使菜单本身居中的任何想法，以便

它会自动重新定位，无论它的大小表是什么？

另外，当我开始我的文本时在左边是合理的，但是在投入大量居中选项的过程中，菜单文本现在也是以b $ b为中心的。理想情况下，我希望文本是合理的。


我正在处理的测试页面可以在这里找到：

URL =< http ：//www.nss.org/testmenu/news.htm>


（2）


如果看一下图片在

URL =< http：//www.nss.org/testmenu/Firefox.jpgyou将在

Firefox中看到顶级按钮是均匀的，并且下拉

组件出现在其父母的正下方。


如果你看一下URL =< http://www.nss.org/testmenu/IE7 .jpg>，你会看到

在Internet Explorer 7中，下拉列表向右移动，

，右边的最后一个顶级按钮不会填充正确。


有没有办法让菜单在Firefox和

IE中表现相同？请注意，我无法访问IE5或6，所以不知道

代码如何在那里举办。


预先感谢您的帮助。


最诚挚的问候，吉姆
http://artsnova.com/blog

推荐答案

2008-04-29，Jim< Fa **** *****@astrodigitalNOT.orgwrote：

On 2008-04-29, Jim <Fa*********@astrodigitalNOT.orgwrote:

>




我有两个问题/问题与CSS水平下拉菜单

菜单，我希望有人可以帮助我。


（1）


我的菜单中心有问题。我从教程中获取了

的代码，但该菜单是齐左左对齐的。不是什么

我想要的。谷歌关于如何集中的后续搜索产生了各种各样的方法来集中处理，但没有一种方法可行。


唯一的方法我能够将菜单置于封闭的

表中是为了在菜单ID上设置margin-left属性来强制

菜单在右边。它有效，但我不喜欢它，因为它是硬编码的b $ b定心。有关如何使菜单本身居中的任何想法，以便

它会自动重新定位，无论它的大小表是什么？

>
Hi,

I have two questions/problems pertaining to CSS horizontal dropdown
menus and am hoping that someone here can help me out.

(1)

I''m having a problem centering the menu. I picked up the code for
this from a tutorial but that menu was flush-left justified. Not what
I want. Subsequent searches on google on how to center yielded a
varity of ways to center things but none have worked.

The only way I''ve been able to center the menu inside the enclosing
table is to set the margin-left property on the menu id to force the
menu to the right. It works but I don''t like it because it is "hard
coded" centering. Any ideas on how to center the menu itself so that
it recenters itself automatically no matter what size table it''s in?

这里的问题是你想要集中收缩。为此你想要

显示：表格，但它在IE中不起作用。


见
http://netweaver.com.au/alt/shrinkTo...rinkToFit.html


没有好的设置宽度：100％的div（#menu） - 你想要它宽

足够它的花车，不要将其内容区域设置为其容器宽度的100％。


或者，因为你在大多数情况下都设置了精确的宽度，你可以

计算出#menu需要的宽度，将其设置为那个宽度，然后

给它自动左右边距。但这并不比

好​​多，只需将左边距设置为15px。


或者将其保留为自动宽度，使其为text-align：中心，并在其中显示

项目：内联或显示：内联块。这是一个更大的变化，但可能会给你带来更多问题。显示：
在FF2中不支持
内联块。


所以这些是选项。


我的建议：对于不错的浏览器使用display：table，然后让它在IE中左边对齐
。它不会让任何人受伤左边的

。

The problem here is you want centered shrink-to-fit. For that you want
display: table, but it won''t work in IE.

See
http://netweaver.com.au/alt/shrinkTo...rinkToFit.html

It''s no good setting width: 100% on that div (#menu)-- you want it wide
enough for the floats in it, not to set its content area to 100% the
width of its container.

Alternatively, since you''re setting exact widths on most things, you can
work out the width #menu needs to be, set it to that width, and then
give it auto left and right margins. But that''s not much better than
just setting the left margin to 15px.

Or leave it as width auto, make it text-align: center, and make the
items inside it display: inline or display: inline-block. This is a
bigger change though and may cause you more problems. Display:
inline-block is not supported in FF2.

So those are the options.

My recommendation: use display: table for decent browsers and just let
it align to the left in IE. It''s not going to hurt anyone to have it on
the left.

另外，当我开始时我的文字被遗弃了有理由但在课程中投入大量的中心选项，菜单文本现在也是以b $ b为中心。理想情况下，我希望文本是合理的。


我正在处理的测试页面可以在这里找到：

URL =< http ：//www.nss.org/testmenu/news.htm>

Also, when I started out my text was left justified but in the course
of throwing in multitudes of centering options, the menu text is now
centered as well. Ideally I''d like the text to be left justified.

The test page I am working on can be found here:
URL=<http://www.nss.org/testmenu/news.htm>

从#menu和#menu删除text-align：center并删除

align =" center"从包含#menu的表格开始。


我还在样式表中看到了float：center。没有这样的东西！


关于居中的问题，为什么不去寻找一个完全不那么好的b $ b中心设计呢？这些天看起来有点过时了，所以可能因为实际上非常难以实现，所以每个人都放弃了。

非表CSS。 br />

Remove text-align: center from #menu and #menu ul and remove
align="center" from the table containing #menu.

I also saw float: center in your stylesheet. There''s no such thing!

On the subject of centering, why not just go for an altogether less
centered design? It looks a bit outdated these days to centre
everything, probably because it''s so much harder to do practically in
non-tables CSS so everyone gives up.

（2）


如果你看看图片

URL =< ; http：//www.nss.org/testmenu/Firefox.jpgyou将在

Firefox中看到顶级按钮均匀，并且下拉

组件出现紧挨着它的父母。


如果你看一下URL =< http://www.nss.org/testmenu/IE7.jpg>，你会看到

在Internet Explorer 7中，下拉菜单向右移动，

，右边的最后一个顶级按钮没有正确填写。


有没有办法让Firefox和

IE中的菜单表现相同？请注意，我无法访问IE5或6，因此不知道

代码如何在那里展开。

(2)

If you take a look at the picture at
URL=<http://www.nss.org/testmenu/Firefox.jpgyou will see that in
Firefox the top level buttons are even and that the drop down
component appears immediately below its parent.

If you look at URL=<http://www.nss.org/testmenu/IE7.jpg>, you will see
that in Internet Explorer 7 the dropdown is shifted to the right and
that the last top level button on the right doesn''t fill in properly.

Is there a way to get the menu to behave the same in both Firefox and
IE? Note that I don''t have access to either IE5 or 6 so have no idea
how the code fairs there.

我没有（或想要）访问任何版本的IE，所以无法帮助你

这个。但请记住，您的菜单无法访问

给没有鼠标或指点设备的人。


那不是建立一个蓬勃发展的外星社区的方式。

I don''t have (or want) access to any version of IE so can''t help you
with this one. But bear in mind also that your menus are not accessible
to people who don''t have a mouse or pointing device.

That''s no way to build a thriving extraterrestrial community.

嗨Ben，


2008年4月29日星期二16:27:28 - 0500，Ben C< sp ****** @ spam.eggswrote：

Hi Ben,

On Tue, 29 Apr 2008 16:27:28 -0500, Ben C <sp******@spam.eggswrote:

> 2008-04-29，Jim< Fa *** ******@astrodigitalNOT.orgwrote：

>On 2008-04-29, Jim <Fa*********@astrodigitalNOT.orgwrote:

>>
（1）

我是有一个问题集中在菜单上。我从教程中选择了这个代码，但该菜单是齐次左对齐的。不是我想要的。谷歌关于如何集中的后续搜索产生了多种方法来集中处理，但没有一种方法可行。

唯一的方法是我能够将菜单集中在封闭的
table是在菜单ID上设置margin-left属性以强制
菜单向右移动。它有效，但我不喜欢它，因为它是硬编码的。定心。有关如何使菜单本身居中的任何想法，以便它自动重新定位，无论它的大小是什么尺寸表？

>>
(1)

I''m having a problem centering the menu. I picked up the code for
this from a tutorial but that menu was flush-left justified. Not what
I want. Subsequent searches on google on how to center yielded a
varity of ways to center things but none have worked.

The only way I''ve been able to center the menu inside the enclosing
table is to set the margin-left property on the menu id to force the
menu to the right. It works but I don''t like it because it is "hard
coded" centering. Any ideas on how to center the menu itself so that
it recenters itself automatically no matter what size table it''s in?

这里的问题是你想要集中收缩。为此你想要
display：table，但它在IE中不起作用。

The problem here is you want centered shrink-to-fit. For that you want
display: table, but it won''t work in IE.

太棒了。该站点的大部分流量来自使用IE的人。所以

无论我做什么，它都必须在IE中工作回到v5。对于我的个人网站，

我不在乎它是否在IE中不起作用 - 我只是确保我的代码

通过了W3c验证。 />

Great. Most of the traffic to the site is from folks using IE. So
whatever I do it has to work in IE back to v5. For my personal sites,
I don''t care if it doesn''t work in IE - I just make sure my code
passes the W3c validation.

>
请参阅
http://netweaver.com.au/alt/shrinkTo...rinkToFit.html

这不好设置宽度：该div上的100％（#menu） - 您希望它足够宽，以便其中的浮动，而不是将其内容区域设置为其容器的宽度的100％。

>
See
http://netweaver.com.au/alt/shrinkTo...rinkToFit.html

It''s no good setting width: 100% on that div (#menu)-- you want it wide
enough for the floats in it, not to set its content area to 100% the
width of its container.

好​​的。我放弃了那段代码。没有变化，所以没有伤害。

Okay. I dropped that code. No change so no harm.

>
或者，因为你在大多数事情上设置了确切的宽度，你可以给它自动左右边距。但是，仅仅将左边距设置为15px并不比
好多少。

>
Alternatively, since you''re setting exact widths on most things, you can
work out the width #menu needs to be, set it to that width, and then
give it auto left and right margins. But that''s not much better than
just setting the left margin to 15px.

试过自动选项，但没有运气。

Tried the auto options but no luck there.

>
或者将其保留为宽度自动，使其为text-align：center，并使其中的
项显示：inline或display：inline-block。这是一个更大的变化，但可能会导致更多问题。显示：
FF2不支持内联块。

所以这些是选项。

>
Or leave it as width auto, make it text-align: center, and make the
items inside it display: inline or display: inline-block. This is a
bigger change though and may cause you more problems. Display:
inline-block is not supported in FF2.

So those are the options.

呃。看起来我将被困在边缘左边。

Ugh. Looks like I''m going to be stuck using the margin-left.

>
我的建议：使用display：table for体面的浏览器，让它在IE中左对齐。左边的人不会伤到任何人。

>
My recommendation: use display: table for decent browsers and just let
it align to the left in IE. It''s not going to hurt anyone to have it on
the left.

但它看起来像crud。


我已经确认display：table就像魅力一样FF但是在IE7中忽略了
。

But it will look like crud.

I''ve confirmed that the display:table works like a charm in FF but is
ignored in IE7.

>另外，当我开始我的文字时左对齐，但在投入大量居中选项的过程中，菜单文本现在也处于中心位置。理想情况下，我希望文本是合理的。

我正在处理的测试页面可以在这里找到：
URL =< http：//www.nss.org /testmenu/news.htm>

>Also, when I started out my text was left justified but in the course
of throwing in multitudes of centering options, the menu text is now
centered as well. Ideally I''d like the text to be left justified.

The test page I am working on can be found here:
URL=<http://www.nss.org/testmenu/news.htm>

从＃menu和#menu删除text-align：center并删除
align =" center"从包含#menu的表中。

Remove text-align: center from #menu and #menu ul and remove
align="center" from the table containing #menu.

谢谢。是的，我正在添加中心在任何地方试图找到一些

组合，这将导致一个居中的导航栏。

Thanks. Yeah, I was adding "centers" everywhere trying to find some
combination that would result in a centered nav bar.

>我还看到你的样式表中的float：center 。没有这样的事情！

>I also saw float: center in your stylesheet. There''s no such thing!

现已删除。

Now removed.

>关于居中，为什么不呢去一个完全不那么中心的设计？这些天看起来有点过时，以至于所有东西都集中在一起，可能是因为在非CSS表格中实际上做得太难了所以每个人都放弃了。

>On the subject of centering, why not just go for an altogether less
centered design? It looks a bit outdated these days to centre
everything, probably because it''s so much harder to do practically in
non-tables CSS so everyone gives up.

因为现有的设计是居中的，我正在寻找一种方式来取代当前的菜单 - 这不仅有点难看但非常

范围有限。问题是每个人都希望他们的东西在主站点导航栏上显示

。我建议使用仅CSS下拉菜单作为减少空间开销的方法，同时增加可用的

链接数。只有CSS（没有javascript），因为所有志愿者都支持这个网站，所以需要的背景知识越少

越好。

Because the existing design is centered and I am looking for a way to
replace the current menu - which is not only kind of ugly but very
limited in scope. The problem is everyone wants their stuff to appear
on the main site nav bar. I suggested a CSS only dropdown menu as a
way of reducing the spatial overhead while increasing the number of
links available. CSS only (no javascript) because the site is
supported by all volunteers so the less background knowledge required
the better.

>

>

>（2）

如果您看一下
URL =< http：// www.nss.org/testmenu/Firefox.jpgyou会在Firefox中看到顶级按钮是均匀的，并且下拉
组件会立即显示在其父级之下。

如果您查看URL =< http：//www.nss.org/testmenu/IE7.jpg>，您会看到
在Internet Explorer 7中，下拉列表向右移动并且
右边的最后一个顶级按钮没有正确填写。

有没有办法让菜单在Firefox和IE浏览器中表现相同？请注意，我无法访问IE5或6，因此不知道代码如何在那里举行。

>(2)

If you take a look at the picture at
URL=<http://www.nss.org/testmenu/Firefox.jpgyou will see that in
Firefox the top level buttons are even and that the drop down
component appears immediately below its parent.

If you look at URL=<http://www.nss.org/testmenu/IE7.jpg>, you will see
that in Internet Explorer 7 the dropdown is shifted to the right and
that the last top level button on the right doesn''t fill in properly.

Is there a way to get the menu to behave the same in both Firefox and
IE? Note that I don''t have access to either IE5 or 6 so have no idea
how the code fairs there.

我没有（或想要）访问任何版本的IE，所以无法帮助你
这个。

I don''t have (or want) access to any version of IE so can''t help you
with this one.

大鼠。不仅仅是上面的问题，而且当IE7首页加载时，IE7的最右边的按钮是隐形的，直到你实际上将鼠标悬停在左边的按钮上。

Rats. Not only the above problems but with IE7 when the page first
loads, the right-most button is invisible until you actually
mouse-over the button immediately to its left.

但请记住，对于没有鼠标或指针设备的人来说，您的菜单无法访问。

But bear in mind also that your menus are not accessible
to people who don''t have a mouse or pointing device.

有这样的吗？我从来没有使用鼠标或

手写笔来访问链接。我可以假设这对盲人和使用某种读者的人来说是个问题吗？它是一个下拉菜单，

会产生问题吗？

Are there such? I''ve never accessed a link without using a mouse or
stylus. Can I assume that this is an issue for folks who are blind
and use some sort of reader? Is it that it''s a drop-down menu that
creates the problem?

>那是'没有办法建立一个蓬勃发展的外星社区。

>That''s no way to build a thriving extraterrestrial community.

但是我们需要从某个地方开始。


查看我们刚刚添加到网站的Stephen Hawking的视频：
http://www.nss.org/资源/图书馆... cy / hawking.htm

感谢您的帮助Ben。



Best此致，Jim
http://artsnova.com/blog

在文章< sl ********************* @ bowser.marioworld>，

Ben C< sp ****** @ spam.eggswrote：

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

我还在样式表中看到了float：center。没有这样的东西！

I also saw float: center in your stylesheet. There''s no such thing!

偶尔，我想知道这种可能性是否有用！

也许它只会复杂的设计工作没有什么大的收获。

Now and then, I wonder about the usefulness of such a possibility!
Perhaps it would just complicate design work for no big gain.

关于居中的问题，为什么不去寻求更少的

中心设计？

On the subject of centering, why not just go for an altogether less
centered design?

听到......

Hear hear...

这些天来看起来有点过时了

所有东西，可能是因为实际上非常难以实现

非表CSS所以每个人都放弃了。

It looks a bit outdated these days to centre
everything, probably because it''s so much harder to do practically in
non-tables CSS so everyone gives up.

中心整个网站是一回事，但是在
主框架中居中很多看起来并不好看。


我觉得这只是一种天真的美学而不是老式的，因此：这是一个简单的设计原则，任何人都可以想出来'''让事情变得美好和对比'b $ b对称'。


* this * kind的对称性是明显且一般容易做到。因此，对于缺乏经验的人来说（孩子们经常这样做），它往往会花费很多时间 - 或者他们可以做什么，因为他们的经验和想要做得很好

布局''。


-

dorayme

To centre a whole website is one thing, but to centre a lot within the
main frame does not look good to my eye.

Rather than being old fashioned, I think it is just a naive aesthetic
and for this reason: it is the one simple design principle anyone can
come up with no matter how inexperienced, ''make things nice and
symmetrical".

Symmetry of *this* kind is obvious and generally easy to do. So it tends
to be something inexperienced people do (children do this a lot) - what
else can they do, given their experience and desire to make it ''nicely
laid out''.

--
dorayme

这篇关于CSS水平下拉菜单问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！