css - 我通过 CSS 将我的按钮四舍五入，现在它们层叠

Question

我使用了两个边框选项来围绕我站点中的各种按钮，因此，它们现在通过大约一个换行符级联。 (见图:http://gyazo.com/14af343dea8b280262f6c88465659c42)

每个按钮的 HTML 和 CSS 几乎相同，因此我发布了一个示例。关于为什么会发生这种情况(我想是 div 标签)以及如何阻止它的任何想法？

编辑 - JS Fiddle 上传:http://jsfiddle.net/4phcS/

CSS:

#linkwordpress
{
    color:white;
    background-color:#5C0DAC;
    font-family:Arial, Sans-Serif;
    font-size:18px;
    text-align:center;
    width:100px;
    height:30px;
    position:relative;
    top:-90px;
    left:500px;
    line-height:28px;
    border:2px solid;
    border-radius:25px;
}

HTML:

<div id="linkwordpress">
    <a href="../wordpress">Wordpress</a>
</div>

Answer 1

不要使用 id (#)，而是使用类，如下所示:

.header {
  color:white;
  text-align:center;
  background-color:#5C0DAC;
  font-family:Arial, Sans-Serif;
  font-size:30px;
  padding:0px;
  margin-bottom:10px;
  height:38px;
  width:800px;
  border:2px solid;
  border-radius:25px;
  display: inline-block;
}

并使用 display: inline-block。

<div class="header">
       Leon's CS150 Assignment
</div>
<div class="header">
       Leon's CS150 Assignment 2
</div>