HTML
<body><div > <div ID="header"><!-- Start Navbar --> <div ID="navbar" name="nav-top"> <ul> <li><a href="index.HTML">Home</a></li> <li><a href="about.HTML">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">FAQ</a></li> </ul> </div> </div><!-- End Navbar/Start Content --><div ID="content"><div ID="inner"><!-- Content header --> <table ID="table_1"> <tbody> <tr ID="tab_head"> <th><h1>About me | Section 1</h1></th> </tr> <tr ID="para_1"> <td><h3>Hello and Welcome!</h3></td> </tr> </tbody> </table><!-- Content Body --><table ID="table_2"> <tbody> <tr> <td><p>Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah BLah Blah Blah Blah Blah Blah Blah.</p></td> </tr> </tbody></table></div></div><div ID="my-footer">This is the content for Layout div Tag "footer"</div></div><!-- Add Js --></body>
CSS
#navbar { wIDth: 100%; float: none; margin: 0 0 3em; padding: 0 0 0 0; background-color: #ffffff; border-bottom: 1px solID #2B9EFF; }#navbar ul { List-style: none; wIDth: 730px; /* 730px wIDth was 800px before,but changed to slIDe navbar to right */ margin:0 auto; overflow:hidden; }#navbar li { float: left; }#navbar li a { wIDth:150px; display: block; padding: 10px 15px; text-decoration: none; Font-weight:normal; color: #a3a3a3; border-right: 1px solID #ccc; }#navbar li:first-child a { border-left: 1px solID #ccc; }a:link,a:visited { background-color: #ffffff; text-align: center; text-transform: uppercase;}#navbar a:hover,a:active { background-color: #2B9EFF; color: #141414; Font-weight:lighter; }/* Content */table { wIDth: 100%; text-align: center;}#para_1 td { text-align:center;}#table_2 { wIDth:100%; text-align:justify; margin}#my-footer { wIDth:100%; height:80px; position: fixed; bottom:0; left: 0; clear:both; background:#2B9EFF; text-align:center; } 我的主要关注点 – 如果你还没有注意到 – 是我的主要导航栏应该位于其他一切的顶部,不在页面的中心.到目前为止,我不得不忍受的是半成品造型,最终导致我现在所拥有的.似乎我可以通过设置像素宽度来稍微调整它,但是当我尝试用百分比来处理它时,它就会被打破.
我试图开始工作的第二点是下面的内容,其中包含我的各种摘要以及最终将托管某些其他内容(链接,图像等)的内容.我以为我可以用一张桌子来工作,但我不能为我的生活让“抽象”(Blah)内容集中.所以,我当时所做的就是创建第二张桌子,以为我可以调整两侧(右侧和左侧)桌子的边距,使所述摘要居中.
它没用.
我目前正在使用Adobe CS6并使用液体网格布局启动页面.我想专注于布局/风格,也会考虑用户显示器的整体不同分辨率/尺寸.换句话说,我想通过手机或平板电脑查看时进行调整.
请列出任何建议.对于这些东西我是一个完全的新手,所以我觉得来这里会给我一个更好的机会来理解我做错了什么.
请随时询问更多信息,但我认为到目前为止我提供的内容应该足够考虑我的初步查询.
我该怎么做才能调整我的导航栏？在考虑液体网格布局时,我可以将当前元素保持在它们所处的位置/样式中,还是我必须尝试不同的路径？为什么我不能添加到当我可以在左侧时,第二张桌子边缘的右侧？
感谢您提出的任何提示！
最亲切的问候,
> T.R.G.
解决方法 你必须添加这个类：.clear { clear: both; float: none;} CSS更改：
#navbar ul { List-style: none; wIDth: 730px; overflow: hIDden; clear: right; float: right; margin: 0; padding: 0;}#navbar { wIDth: auto; clear: right; float: right; padding: 0 0 0 0; background-color: #ffffff; border-bottom: 1px solID #2B9EFF;} HTML更改：
<div ID="header"><!-- Start Navbar --> <div ID="navbar" name="nav-top"> <ul> <li><a href="index.HTML">Home</a></li> <li><a href="about.HTML">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">FAQ</a></li> </ul> </div><div ></div> </div>总结
以上是内存溢出为你收集整理的html – 需要帮助对齐/居中导航栏和表格内容(CSS)全部内容，希望文章能够帮你解决html – 需要帮助对齐/居中导航栏和表格内容(CSS)所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）