Question

我正在阅读CSS和HTML后构建我的第一个网站。我能够通过导航栏和品牌在我的索引页面上显示标题。对于品牌，我使用margin-top属性在中心对齐，并使用float属性设置导航链接。但是，当我使用firefox检查ul元素时，

我看到每个margin-top和margin-bottom 16 px我都不知道如何添加它。
使用margin-top属性调整品牌的正确方法是居中对齐吗？
为什么ul元素没有为标题设置44 px的整个高度。

我正在添加plunker网址以获取更多详细信息：http://plnkr.co/edit/RjQtIR?p=preview

代码了解更多详情：

<header class="main-header">
        <nav class="top-bar clearfix">
            <span class="brand">Money Plant Services</span>
            <section class="nav-menu">
                <ul class="nav-items">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Downloads</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </section>
        </nav>
    </header>

CSS:

.main-header{
  width: 100%;
  height:44px;
  background-color: #3A3A3A;
}

.brand{
  float: left;
  margin-top: 12px;
  padding-left: 10px;
  color: #FFFFFF;
}

.nav-menu{
  float:right;
}

.nav-items{
  list-style: none;
}

.nav-items li{
  float: left;
  margin-right: 5px;
  padding: 5px;
  background-color: #FFFFFF;
}

li > a{
  color: black;
  text-decoration: none;
}

Answer 1

我希望这会对你有所帮助。只需用你的代码替换下面的代码即可...

CSS：

.nav-items {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top:8px;
  display: inline-block;
}

Answer 2

Ul有一个默认的保证金，因此您可以通过添加....

来删除它

 <ul style="margin:0px">

此外，浏览器与浏览器之间的边距也不同，因此值得在线查看有关它的信息或使用inspect元素自行测试。

当进行horixontally对齐时，有很多方法可以做到这一点......

你可以使用text-align方法或margin自动方法或自定义填充方式。（还有其他方法）。

示例：

<div style="width:400px;height:20px;text-align:center;">
<div style="width:20px;height:20px;">
</div></div>

示例：

<div style="width:400px;height:20px;">
<div style="width:20px;height:20px;margin-left:auto;margin-right:auto;">
</div></div>

垂直对齐有点困难，但可以使用表格单元格（还有其他方法）。

正确的对齐方式是使用text-align属性或使用w3c验证服务所说的自动边距。

如何增加保证金最高和保证金最低价

2 个答案: