Question

我只是一个初学者而且我正在学习。所以我想知道实现这个的正确方法。我创建了三个按钮并将其添加到标题中。我希望它们之间有相同的空间。这样做的最佳方式或正确方法是什么？保证金是一个很好的方法吗？

我的CSS样式

.MainHeader{
    height:100px;
    width:688px;
    padding:inherit;
    border:1px solid blue;
    background-color:black;
    }
.BodyContainer{
    height:788px;
    width:688px;
    padding:inherit;
    border: 1px solid blue;
    background-color:white;
    }
.MainFooter{
    height: 100px;
    width: 688px;
    padding:inherit;
    border: 1px solid blue;
    background-color:black;
    }
.Button{
    display:block;
    height:30px;
    width:150px;
    padding :0px 5px;
    background:darkorange;
    border:1px solid black;
    color:white;
    text-align:center;
    font:bold 14px/30px arial;
    background: linear-gradient(white, blue);
    border-radius: 5px;
    }
a.Button{
    text-decoration: none;
    }

a.Button:hover{
    background: grey;
    }
ul{
    padding: 0;
    }
li{
    list-style:none;
    display:inline-block;
    margin-right: 8.6px;
margin-left: 8.6px;
}

我的HTML代码

<div class="MainHeader">
    <div>
    <div>
        <ul>
        <li><a class="Button" href="http://www.google.com">Homepage</a></li>
        <li><a class="Button" href="http://www.google.com">Search</a></li>
        <li><a class="Button" href="http://www.google.com">Contact Us</a></li>
    </ul>
    </div>
</div>
</div>

Answer 1

有很多方法可以做到这一点。一个是 - 做一些保证金：

li{
  list-style:none;
  display:inline-block;
  margin-right:10px;
}

没有“做正确的方式”这样的事情 - 但通常的方法是设定保证金

如何在所有标题按钮之间创建相等的间距？

1 个答案: