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

Question

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

结果应如下所示：

但我明白了：

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;
}

从 .free_column class 中删除 height。

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

这是更新后的 fiddle：http://jsfiddle.net/4znkyroa/

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

How to fix the border and padding on the links

html

css

padding