如何修复链接上的边框和填充

Question

我正在尝试修改我正在编辑的页面上的链接行，我无法直接编辑HTML，只能编辑CSS。无论我做什么原因，链接的文本行都会溢出到其他行中。

结果应如下所示：

但我明白了：

body {
    max-width:1122px;
    min-width:1122px;
}
.free_column{
    float:left;
    width:345px;
    height:315px;
    margin-right:10px;
    margin-left:12px;
    margin-top:20px;
    border:#d9d9d9 4px solid;

}
.free_column header{
    padding:14px;
}
.free_column h2{
    font-size:1.3em;
    color:#ffffff;
    font-family: 'Montserrat Subrayada', sans-serif;
    font-weight:200;
}
.free_column h3{
    font-size:.9em;
    color:#c3c2cc;
}
.free_column a{
    /*padding-left:64px;*/
    /*padding-right:150px;*/
    margin-top:20%;
    margin-left:18px;
    text-align:left;
    color:#667cbd;
    line-height:2.9em;
    border-top: #d1d1d1 2px dotted;
    padding-top:11px;
    font-size:1em;
}

.free_column header{
    background-color:#9f310e;

}

<section class="free_column">
    <header>
        <h2>Free Enterprise</h2>
        <h3>Free Enterprise - Your Home for Free Market News and Ideas</h3>
    </header>
    <a class="free_links" href="#">Military, Government, Business: Working Together</a>
    <a class="free_links" href="#">’Tis the Season for … Dangerous Fakes?</a>
    <a class="free_links" href="#">A Regulatory System That Works for America, Part II</a>
    <a class="free_links" href="#">The Fourth Branch of Government, Part I</a>
    <a class="free_links" href="#">Reducing Poverty and Raising Prosperity</a>
</section>

Answer 1

a元素是内联元素，它们只会与其内容一样宽，并且不会一直是盒形的，您可以使用以下方式覆盖此行为：

.free_column a{
   display: block;
}

Answer 2

更新.free_column a规则。

display: block;将其转换为块元素以填充整行。

.free_column a {
  border-top: 2px dotted #d1d1d1;
  color: #667cbd;
  display: block;
  margin: 8px;
  padding-top: 12px;
}

从height班级中删除.free_column。

将border-top: none;添加到第一个链接。

这是更新的小提琴：http://jsfiddle.net/4znkyroa/