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

【问题标题】：How to fix the border and padding on the links如何修复链接上的边框和填充
【发布时间】：2015-04-25 04:30:09
【问题描述】：

我正在尝试修复正在编辑的页面上的链接行，我无法直接编辑 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>

【问题讨论】：

每个链接的文本必须只在一行吗？

标签： html css padding

【解决方案1】：

a 元素是内联元素，它们的宽度仅与它们的内容一样宽，并且并不总是盒形，您可以使用以下命令覆盖此行为：

.free_column a{
   display: block;
}

【讨论】：

【解决方案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 类中删除height。

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

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

【讨论】：