2个列表：1个左对齐，1个右对齐在同一行 [英] 2 lists: 1 left aligned and 1 right aligned on same line
问题描述
大家好，
为什么这不适用于Firefox，但在IE6中是完美的？
在IE6中，正文在同一行，但在Firefox中，左对齐文本
在右对齐文本上方的行上。
<！DOCTYPE HTML PUBLIC" ; - // W3C // DTD HTML 4.01 Transitional // EN"
" http：//www.w3.org/TR/html4/loose.dtd">
< html>
< head>
< meta http-equiv =" Content-Type"含量=" text / html的; charset = iso-8859-1">
< title> Untitled Document< / title>
< style type =" text / css">
<！ -
body {
font-family：Geneva，Arial，Helvetica，sans-serif;
font-size：77％;
保证金：0;
填充：0;
}
a ，a：访问{
颜色：＃00f;
text-decoration：none;
}
a：悬停{
颜色：＃f60;
文字装饰：下划线;
}
#basicnav {
填充：4px 0;
保证金：0;
宽度：100％;
背景颜色：＃ 999;
border-top：1px solid #ccc;
border-bottom：1px solid＃000;
}
#basicnav a，＃basnnav a：已访问{
颜色：#fff;
text-decoration：none;
font-重量：粗体;
}
#basicnav a：悬停{
颜色：＃000;
text-装饰：下划线;
font-weig ht：bold;
}
#topleftnavlist li {
display：inline;
list-style-type ：无;
float：left;
padding-left：20px;
}
#toprightnavlist li {
显示：内联;
list-style-type：none;
float：right;
padding-右：20px;
}
- >
< / style>
< / head> ;
< body>
< div id =" basicnav">
< ul id =" topleftnavlist">
< li>< a href ="＃"> Home< / a>< / li>
< / ul>
< ul id =" toprightnavlist">
< li>< a href = "＃">网站地图< / a>< / li>
< li>< a href ="＃">销售我们的产品< / a>< ; / li>
< li>< a href ="＃">联系我们< / a>< / li>
< / ul>
< / div>
< / body>
< / html>
谢谢，
JB
Hi All,
Why doesn''t this work in Firefox but is perfect in IE6?
In IE6, the text is on the same line but in Firefox, the left aligned text
is on the line above the right aligned text.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 77%;
margin: 0;
padding: 0;
}
a, a:visited {
color: #00f;
text-decoration: none;
}
a:hover {
color: #f60;
text-decoration: underline;
}
#basicnav {
padding: 4px 0;
margin: 0;
width: 100%;
background-color: #999;
border-top: 1px solid #ccc;
border-bottom: 1px solid #000;
}
#basicnav a, #basicnav a:visited {
color: #fff;
text-decoration: none;
font-weight: bold;
}
#basicnav a:hover {
color: #000;
text-decoration: underline;
font-weight: bold;
}
#topleftnavlist li {
display: inline;
list-style-type: none;
float: left;
padding-left: 20px;
}
#toprightnavlist li {
display: inline;
list-style-type: none;
float: right;
padding-right: 20px;
}
-->
</style>
</head>
<body>
<div id="basicnav">
<ul id="topleftnavlist">
<li><a href="#">Home</a></li>
</ul>
<ul id="toprightnavlist">
<li><a href="#">Site map</a></li>
<li><a href="#">Sell our products</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</body>
</html>
Thanks,
JB
推荐答案
JB< me@here.com>写道：
JB <me@here.com> wrote:
为什么这不适用于Firefox，但在IE6中是完美的？
您指定了display：inline;对于LI元素，但不包含包含它们的UL
元素。这可能与它有关。
body {
font-family：Geneva，Arial，Helvetica，sans-serif;
font-size：77％;
Why doesn''t this work in Firefox but is perfect in IE6?
You specified "display: inline" for the LI elements, but not for the UL
elements that contain them. That might have something to do with it.
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 77%;
请不要在读者身上造成微字体。正常的正文文本应该使用字体大小为100％的
。只有法律术语和类似的精美印刷才能使用
较小的字体。
-
Darin McGrew， mc **** @ stanfordalumni.org ， http://www.rahul.net/mcgrew/
网页设计组， da ** *@htmlhelp.com ， http://www.HTMLHelp.com/
如果你发现自己陷入困境，请停止挖掘。 - Will Rogers
Please don''t inflict microfonts on your readers. Normal body text should
use a font size of 100%. Only legalese and similar fine-print should use
smaller fonts.
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/
"If you find yourself in a hole, stop digging." - Will Rogers
>您指定了display：inline;对于LI元素，但不包含UL
> You specified "display: inline" for the LI elements, but not for the UL
包含它们的元素。这可能与它有关。
elements that contain them. That might have something to do with it.
我补充说：
#basicnav ul {
显示：内联：
}
但它没有排成一行:(
I added:
#basicnav ul{
display: inline:
}
but it didn''t line them up :(
body {
font-family：Geneva，Arial，Helvetica，sans-serif;
font-size：77％;
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 77%;
请不要在读者身上造成微字体。正常的正文应使用100％的字体大小。只有法律术语和类似的精美版本才能使用较小的字体。
Please don''t inflict microfonts on your readers. Normal body text should
use a font size of 100%. Only legalese and similar fine-print should use
smaller fonts.
我从alistapart上的文章中获取了这个字体大小。
感谢您的反馈。
Jeff
I took this font-sizing from an article on alistapart.
Thanks for your feedback.
Jeff
星期四，2006年2月23日23:32:00 -0000来自JB< me@here.com>：
Thu, 23 Feb 2006 23:32:00 -0000 from JB <me@here.com>:
< ！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 Transitional // EN"
" http：//www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<无线电通信/>
请不要发布HTML或CSS;给我们提供URL，以便我们可以使用我们的浏览器尝试使用
。
-
Stan Brown，Oak Road Systems ，美国纽约州汤普金斯县
http://OakRoadSystems.com/
HTML 4.01规范： http：//www.w3。 org / TR / html401 /
验证人： http：/ /validator.w3.org/
CSS 2.1规范： http://www.w3.org/TR/CSS21/
验证者： http://jigsaw.w3.org/css-validator/
为什么我们不能帮助你：
http：//diveintomark.org/archives/200 ... _wont_help_you
Please don''t post HTML or CSS; give us the URL so that we can try it
using our browsers.
--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won''t Help You:
http://diveintomark.org/archives/200..._wont_help_you
这篇关于2个列表：1个左对齐，1个右对齐在同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
