我正在尝试使用HTML和CSS,并试图找出如何使其工作…我只是想让菜单浮动到h1的右边,但是在同一基线上,所以…但显然是浮动的:是不是让它浮动到右上方?有没有办法让它浮动到右下角或者与包含DIV的底部对齐?
这是HTML:。
<!文档类型HTML>
& HTML& GT;
&头;
<title>网站.com</title>
<link rel=“stylesheet”href=“style.css”type=“text/css”/>
和/头& GT;
和身体;
和DIV & GT;
<h1><a href=“”title=“website.com”>website.com</a>/lt;/h1>
<div id=“menu”>
& UL & GT;
<li><a href=“”title=“主页”>主页</a></li>
<li><a href=“”title=“Link1 description”>链接1</a></li>
<li><a href=“”title=“Link2 description”>链接2</a></li>
<li><a href=“”title=“Link3 description”>链接3</a></li>
<li><a href=“”title=“about website.com”>关于</a></li>
&L/UL & GT;
&L/DIV & GT;
&L/DIV & GT;
& HR/GT;
<P>Lorem Ipsum Dolor Sit Amet,神圣的Adipising精英。Curabitur Mattis Elit et Augue Pellentesque发酵罐Semper Urna Interdum.这是一个很好的例子。发酵库拉比菌,苏西普特优斯莫菌,外用乌尔纳菌,性病维利特菌。杜伊斯·维纳蒂斯,梅图斯在弗林吉拉,内克·阿库·迪尼西姆·阿库,奎斯·索达莱斯·洛雷姆·莫里斯·埃格特·泰卢斯。酵母菌是一种软体动物。这是一个自由的发酵过程。间日里的万寿菊。前庭Eleifend Fringilla Enim,位于Vehicula Justo Tristique A.Aenean Congue前庭。三叶草间叶凝集,羊角蕨属,羊角蕨属,厚皮蕨属,RISUS前庭。Vivamus Vitae Massa Lorem,vel Molestie Tellus。Nula和Magna Orci。修女,神父,神父,神父,神父。莫里斯在莫里斯提普鲁斯。cras eget magna vel enim imperedite aliquam.</p>
<P>前庭vel eros lacus、vel viverra magna。一种是软体动物,另一种是水蚤。酵母菌。Morbi ut Turpis sem,Pretium Sodales Libero。前庭dapibus,女贞子,Lacus est aliquam elit,ut vulputate sapien nisl vitae elit。克拉斯·普尔文纳·米尼斯。洛雷姆·伊普索姆·多尔·西特·阿美,神圣的爱的精英。在Est Orci Proin。鲁特鲁姆洛波提斯码头维塔康莫多。梅塞纳·达皮布·阿利奎姆·安特·埃格特·马蒂斯。Proin justo eros,Bibendum quis scelerisque eget,发酵罐eu purus。万岁万岁女贞女贞女贞女贞女贞女贞女贞女贞女贞女贞女贞女贞女贞女贞女贞女贞女贞女贞女贞女贞女贞女。进化论。Nunc Libero Nulla,坦帕斯奎斯街Dictum vel的Sodales。</p>
<P>nullam pharetra tincidunt lectus ac sollicitudin.药学研究所。杜伊斯在威尼斯厄洛斯。Malesuada码头上的Phasellus ultricies tincident。杜伊斯调味品包装盒。生活愉快,生活自由,生活愉快。Proin dapibus leo non urna pellentescue convallis.Suspendise Massa Leo,Semper Vitae Tincidunt at,Mattis et Sapien.梅塞纳斯-康塞夸特-亨德瑞特-奥迪奥和费加。塞德·迪格尼西姆·马萨是一个独立自主的狮子座,他专横地指挥着一辆车。毛里斯坐在阿美·努拉,一个图皮斯·波特·阿库姆桑。穆尔比·interdum Pellentesque Massa,vel Accumsan Massa Aliquam Quis。塞德·塞德·利古拉·内克。在hac habitasse platea dictumst.Curabitur Vehicillia Scelerisque Ligula non tincident.</p>
& HR/GT;
<p id=“footer”>使用本网站即表示接受我们的<a href=“”>用户协议</a>和<a href=“”>隐私政策</a>。©2010网站.com。保留所有权利。</p>
和/身体;
& lt//html & gt;
< /代码>
这是CSS:。
<预> <代码>正文
{
字体系列:Verdana,sans-serif;
最小宽度:800px;
}
H1
{
显示:内联;
字体变体:小大写
}
H1A
{
颜色:×090;
文字装饰:无;
}
H1A:悬停
{
颜色:α0A0;
}
菜单菜单
{
浮动:正确;
显示:内联;
保证金:0;
填料:0;
字体变体:小大写;
}
菜单菜单
{
保证金:0;
向左填充:0;
浮动:左;
字体粗细:粗体;
}
菜单菜单
{
浮动:左;
显示:内联;
}
菜单菜单
{
颜色:×090;
背景色:f3f3f3;
填料:2px 6px 4px 6px;
文字装饰:无;
}
#菜单ul li a:悬停
{
字体粗细:加粗;
颜色:α0A0;
背景色:f3f3f3;
边框底部:4px实心0a0;
填充底部:0;
}
脚注
{
文本对齐:居中;
字体大小:X-小;
}
< /代码>
下面是现在的样子:
谢谢你的帮助!
这是HTML:
<!doctype html>
<html>
<head>
<title>Website.com</title>
<link rel="Stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div>
<h1><a href="#" title="Website.com">Website.com</a></h1>
<div id="menu">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Link1 Description">Link1</a></li>
<li><a href="#" title="Link2 Description">Link2</a></li>
<li><a href="#" title="Link3 Description">Link3</a></li>
<li><a href="#" title="About Website.com">About</a></li>
</ul>
</div>
</div>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis elit et augue pellentesque fermentum semper urna interdum. Nullam egestas augue ut risus molestie mollis ut sed dolor. Curabitur fermentum, lorem sed suscipit euismod, diam urna vulputate sapien, ac venenatis velit eros sed leo. Duis venenatis, metus at scelerisque fringilla, neque arcu dignissim arcu, quis sodales lorem mauris eget tellus. Phasellus fermentum est eget erat pretium mollis. Cras eu nunc dui, sed fermentum libero. Vivamus posuere pellentesque tellus in interdum. Vestibulum eleifend fringilla enim, in vehicula justo tristique a. Aenean congue vestibulum iaculis. Sed tristique interdum lectus, vel aliquam nisi fringilla ac. Mauris ligula nisl, gravida id consequat in, vestibulum at risus. Vivamus vitae massa lorem, vel molestie tellus. Nulla et magna orci. Nunc turpis ipsum, facilisis eget tristique sit amet, scelerisque quis ligula. Mauris in molestie purus. Cras eget magna vel enim imperdiet aliquam.</p>
<p>Vestibulum vel eros lacus, vel viverra magna. Duis mollis nibh ut erat accumsan ut pulvinar ipsum dapibus. Aliquam vehicula tempus fermentum. Morbi ut turpis sem, pretium sodales libero. Vestibulum dapibus, ligula in molestie scelerisque, lacus est aliquam elit, ut vulputate sapien nisl vitae elit. Cras pulvinar mi nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in est orci. Ut rutrum lobortis quam vitae commodo. Maecenas dapibus aliquam ante eget mattis. Proin justo eros, bibendum quis scelerisque eget, fermentum eu purus. Vivamus viverra ligula a dolor iaculis ullamcorper. Aliquam erat volutpat. Nunc libero nulla, sodales at dictum vel, tempus quis est.</p>
<p>Nullam pharetra tincidunt lectus ac sollicitudin. Duis in venenatis eros. Phasellus malesuada quam vel sapien ultricies tincidunt. Duis condimentum posuere semper. Vivamus eleifend libero eget ligula egestas adipiscing. Proin dapibus leo non urna pellentesque convallis. Suspendisse massa leo, semper vitae tincidunt at, mattis et sapien. Maecenas consequat hendrerit odio et feugiat. Sed dignissim massa a leo sollicitudin imperdiet consequat purus vehicula. Mauris sit amet nulla a turpis porta accumsan. Morbi interdum pellentesque massa, vel accumsan massa aliquam quis. Sed sed ligula neque. In hac habitasse platea dictumst. Curabitur vehicula scelerisque ligula non tincidunt.</p>
<hr />
<p id="footer">Use of this site constitutes acceptance of our <a href="#">User Agreement</a> and <a href="#">Privacy Policy</a>. © 2010 Website.com. All rights reserved.</p>
</body>
</html>
这是CSS:
body
{
font-family: verdana, sans-serif;
min-width: 800px;
}
h1
{
display: inline;
font-variant: small-caps
}
h1 a
{
color: #090;
text-decoration: none;
}
h1 a:hover
{
color: #0A0;
}
#menu
{
float: right;
display: inline;
margin: 0;
padding: 0;
font-variant: small-caps;
}
#menu ul
{
margin: 0;
padding-left: 0;
float: left;
font-weight: bold;
}
#menu ul li
{
float: left;
display: inline;
}
#menu ul li a
{
color: #090;
background-color: #F3F3F3;
padding: 2px 6px 4px 6px;
text-decoration: none;
}
#menu ul li a:hover
{
font-weight: bolder;
color: #0A0;
background-color: #F3F3F3;
border-bottom: 4px solid #0A0;
padding-bottom: 0;
}
#footer
{
text-align: center;
font-size: x-small;
}
下面是现在的情况:
谢谢你的帮助!
