解决了 - 这是集体努力。 非常感谢你,我在这里的第一次发帖经历很精彩,你们都给了我学习的东西:)
我正在尝试使用html5 / css(3)创建一个站点。 我希望导航栏位于标题的远端,并且在共享h1背景时与h1元素位于同一行。 (如果可能的话)我将发布我正在使用的代码,以及一个屏幕截图,显示它看起来像我想要的样子。 注意我已经搞乱了几个小时,所以我的代码很漂亮......现在到处都是。 抱歉。
链接到图像: http : //i36.photobucket.com/albums/e50/Fallon_Vii/screencap.png
<body id="wrapper"> <div id="header"> <img src="images/logo2.png"> <h2>Broadcast Services</h2> <ul id="nav"> <li class="border"> <a href="index.hmtl">Home</a></li> <li class="border"> <a href="about.hmtl">PAGE 2</a></li> <li class="border"> <a href="master.hmtl">PAGE 3</a></li> <li class="border"> <a href="advertise.hmtl">PAGE 4</a></li> <li class="border"> <a href="entertainment.hmtl">PAGE 5</a></li> <li> <a href="contact.hmtl">Contact Us</a></li> </ul> </div>#header { width: 100%; border-top: 1.5px solid black; border-bottom: 1.5px solid black; margin-bottom: 4%; padding: .75%; } #header img { width: 30%; display: inline; } h2 { color: #4F2F8F; font-size: 125%; font-weight: bold; background-image: url(images/transpblack10.png); text-shadow: 1px 1px 1px #000000; line-height: 85%; } #nav { font-size: 110%; float: right; } #nav ul li { display: inline; float: left; list-style-type: none; } #nav ul li a { display: inline-block; text-decoration: none; }
solved - it was a group effort. thank you all so much, my first posting experience on here was wonderful and you all have given me things to learn :)
I am trying to make a site using html5/css(3). I want to have a nav bar to be at the far end of the header, and to be on the same line as the h1 element while sharing the h1 background. (if possible) I will post the code I am using, plus a screenshot showing what it looks like vs what I want it to look like. note I have been messing around with this for several hours so my code is pretty...all over the place right now. Sorry.
LINK TO THE IMAGE: http://i36.photobucket.com/albums/e50/Fallon_Vii/screencap.png
<body id="wrapper"> <div id="header"> <img src="images/logo2.png"> <h2>Broadcast Services</h2> <ul id="nav"> <li class="border"> <a href="index.hmtl">Home</a></li> <li class="border"> <a href="about.hmtl">PAGE 2</a></li> <li class="border"> <a href="master.hmtl">PAGE 3</a></li> <li class="border"> <a href="advertise.hmtl">PAGE 4</a></li> <li class="border"> <a href="entertainment.hmtl">PAGE 5</a></li> <li> <a href="contact.hmtl">Contact Us</a></li> </ul> </div>#header { width: 100%; border-top: 1.5px solid black; border-bottom: 1.5px solid black; margin-bottom: 4%; padding: .75%; } #header img { width: 30%; display: inline; } h2 { color: #4F2F8F; font-size: 125%; font-weight: bold; background-image: url(images/transpblack10.png); text-shadow: 1px 1px 1px #000000; line-height: 85%; } #nav { font-size: 110%; float: right; } #nav ul li { display: inline; float: left; list-style-type: none; } #nav ul li a { display: inline-block; text-decoration: none; }
最满意答案
首先,你的<ul>没有正确的语法......它应该如下所示:
ul#nav li { display: inline; float: left; list-style-type: none; } ul#nav li a { display: inline-block; text-decoration: none; }而且我相信这是你想要实现的目标:
http://jsfiddle.net/NQVLy/5/
Well first off you don't have the proper syntax for your <ul>'s... it should look like this:
ul#nav li { display: inline; float: left; list-style-type: none; } ul#nav li a { display: inline-block; text-decoration: none; }And I believe this is what you are trying to achieve:
http://jsfiddle.net/NQVLy/5/
更多推荐
发布评论