UL导航菜单，右对齐 [英] UL navigation menu, right aligned
问题描述
如何创建功能性*灵活* UL菜单列表
< div>
< ul>
< li> ;< a href ="">< / li>
< li>< a href ="">< / li>
< li>< a href ="">< / li>
< / ul>
< / div>
（在IE，Mozilla1.6，Opera7（或者甚至在Opera6中）工作）
，如今在现代网页上看到的，在右边对齐：
------------------------------------- ----------------- +
正文：ul：MENUITEM_A MENUITEM_B MENUITEM_C
正文
------------------------------------------------- ------
其中：
0）菜单项目放在彼此旁边
尽可能多。
1）菜单项尽可能放在右边。
这是列表中的最后一个菜单项触及
的右边缘
UL周围的容器元素。
2）菜单项宽度应该可以单独指定。
但一般来说菜单项应该尽可能窄。
3）菜单项顺序与
HTML代码在视觉上完全相同。
4）菜单的最大宽度限制为
UL元素周围元素
How to create a functional *flexible* UL-menu list
<div>
<ul>
<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>
</ul>
</div>
(working in IE, Mozilla1.6, Opera7 (or maybe even in Opera6))
as seen on nowadays modern webpages, that is aligned on the right:
------------------------------------------------------+
body: ul: MENUITEM_A MENUITEM_B MENUITEM_C
body text
-------------------------------------------------------
whereby:
0) menu items are placed next to eachother horizonatlly
as many as possible.
1) menu items are placed-aligned to the right as much as possible.
That is the last menu item in list touches the right edge of
the container element around UL.
2) menu item widths should be possible to be specified individually.
But in general the menu items should be as narrow as possible.
3) the menu item order is visually exactly the same as in the
HTML code physically.
4) the maximum width of the menu is limited to the
UL element surrounding element
推荐答案
Marek Mand写道：
Marek Mand wrote:
如何创建功能性*灵活的* UL菜单列表
< div>
< ul>
< li>< a href ="">< / li>
< li>< a href ="">< / li>
< li>< a href ="">< / li>
< / ul>
< / div>
（在IE，Mozilla1.6，Opera7（甚至可能在Opera6中）工作）
如所见在现今的现代网页上，右边对齐：
How to create a functional *flexible* UL-menu list
<div>
<ul>
<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>
</ul>
</div>
(working in IE, Mozilla1.6, Opera7 (or maybe even in Opera6))
as seen on nowadays modern webpages, that is aligned on the right:
你真的吗？要求我们为你编写代码？告诉/告诉我们到目前为止你已经完成了什么
给我们一个例子，说明你的代码目前是什么样的
。您的（测试）页面的URL是什么？
-
芭芭拉
http://home.wanadoo.nl/b.de.zoete/ html / weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html
Are you really asking us to write your code for you? Tell / show us what
you have accomplished so far by giving us an example of what your code
looks like at the moment. What is the URL to your (test) page?
--
Barbara
http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html
文章Marek Mand写道：
In article Marek Mand wrote:
如何创建功能性*灵活的* UL菜单列表
< div>
< ul>
< li>< a href = "">< / li>
< li>< a href ="">< / li>
< li>< a href =" ">< / li>
< / ul>
< / div>
其中：
0）菜单项尽可能多地放在彼此旁边。
1）菜单项尽可能地放在右边。<这是列表中的最后一个菜单项触及了UL周围容器元素的右边缘。
2）菜单项宽度应该可以单独指定。
但总的来说菜单项应尽可能窄。
3）菜单项顺序在视觉上与
HTML代码在物理上完全相同。
4）菜单的最大宽度有限到元素周围的元素
How to create a functional *flexible* UL-menu list
<div>
<ul>
<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>
</ul>
</div> whereby:
0) menu items are placed next to eachother horizonatlly
as many as possible.
1) menu items are placed-aligned to the right as much as possible.
That is the last menu item in list touches the right edge of
the container element around UL.
2) menu item widths should be possible to be specified individually.
But in general the menu items should be as narrow as possible.
3) the menu item order is visually exactly the same as in the
HTML code physically.
4) the maximum width of the menu is limited to the
UL element surrounding element
你不希望列表完全被定位吗？
然后它是小菜一碟：
ul {text-align：right;}
li {display：inline;}
>
< ul>< li> Item1< li> Item2< / ul>
< div class =" content">正文< / div>
如果你仍然想要绝对定位，请看我的信号并添加
..valikko {right：0; text-align：right;}
或者用你的实际HTML提供测试网址。
为了防止包装列表项，你可以使用white-space：nowrap;
-
Lauri Raittila< http://www.iki.fi/lr> < http://www.iki.fi/zwak/fonts>
Saapi l？hett ?? meili？，jos aihe ei liity ryhm ?? n，tai on yksityinen
tjsp。，mutta？l？ L·海特？ samaa viesti？ meilitse ja ryhm ?? n。
You don''t want list to be possible to be positioned absolutely anymore?
Then it is piece of cake:
ul {text-align:right;}
li {display:inline;}
<ul><li>Item1<li>Item2</ul>
<div class="content">Body text</div>
If you still want to position it absolutely, see my sig and add
..valikko {right:0;text-align:right;}
Or provide test url with your actual HTML.
To prevent wrapping of list items, you can use white-space:nowrap;
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi l?hett?? meili?, jos aihe ei liity ryhm??n, tai on yksityinen
tjsp., mutta ?l? l?het? samaa viesti? meilitse ja ryhm??n.
Marek Mand< ca ******** @ mail.ee>写道：
Marek Mand <ca********@mail.ee> wrote:
如何创建功能性*灵活的* UL菜单列表
< div>
< ul>
< li> < a href ="">< / li>
< li>< a href ="">< / li>
< li>< a href ="">< / li>
< / ul>
< / div>
（在IE中工作，Mozilla1.6，Opera7 （或者甚至在Opera6中））
如今在现代网页上看到的那样，在右边对齐：
---------------- -------------------------------------- +
body：ul：MENUITEM_A MENUITEM_B MENUITEM_C
正文
---------------------------------------- ---------------
其中：
0）菜单项尽可能多地放在彼此旁边。
How to create a functional *flexible* UL-menu list
<div>
<ul>
<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>
</ul>
</div>
(working in IE, Mozilla1.6, Opera7 (or maybe even in Opera6))
as seen on nowadays modern webpages, that is aligned on the right:
------------------------------------------------------+
body: ul: MENUITEM_A MENUITEM_B MENUITEM_C
body text
-------------------------------------------------------
whereby:
0) menu items are placed next to eachother horizonatlly
as many as possible.
哦，为了****的缘故，这已经失控了！必须有
一百个列表被重新列入任何东西的例子，除了现在这个组中给出的
列表。
[1]你确定这个列表吗？包含列表数据？
[2]您是否搜索了存档？
[3]您是否阅读了规范，特别是显示？物业？
不，不，不，对吧？
Oh for ****''s sake, this is getting right out of hand! There must have
been a hundred examples of lists being restyled into anything except
lists given in this group by now.
[1] Are you sure this "list" contains listular data?
[2] Have you searched the archive?
[3] Have you read the spec, specifically the "display" property?
No, no and no, right?
这篇关于UL导航菜单，右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
