Question

我很难知道如何完成我的工具栏......我觉得我拥有一切，但实际上并没有水平对齐 - 内联 - 每个标签之间都有空格。我希望它看起来很像这个网站上的工具栏，但它相互对齐，然后两个在它之上。

有人能告诉我我错过了什么吗？感谢您提供任何帮助。

CSS：

.toolbar ul {
     margin:0px;
     padding:0px;
     text-align:center;
     list-style-type:none;

}
.toolbar ul li {
     display:inline;

}
.toolbar ul li a {
     text-decoration:none;
     padding-right:30px;
     background-color:#990000;
     border-style:solid;
     border-color:#000000;
     border-width:1px; 
     padding:10px;
     font-family:"Gadget", sans-serif;
     font-size:14px;
     font-weight:bold;
     position:relative;
     top:100px;
     left:320px;
     vertical-align:bottom; 

}
a:link {
     color:#ffffff;
}

HTML5：

<div class="toolbar">
  <ul>
    <li><a href="content.html">Course Content</a></li>
    <li><a href="resources.html">Related Resources</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="pilot.html">Home</a></li>
  </ul>
</div>

Answer 1

这种行为是由于您的标签是内嵌显示的，因此当您调整窗口宽度并达到较小尺寸时，其他标签会低于其他标签。解决此问题的一种方法是使用固定宽度的工具栏。

SAMPLE

.toolbar ul {
     margin:0px;
     padding:0px;
     text-align:center;
     list-style-type:none;
    width: 800px;

}

水平对齐导航工具栏与间距

1 个答案: