0

我正在创建一个包含名称、职位描述和位置的列表。此列表包含 30 个左右的名称。我希望列表中的最后一个项目位置在下面有大约 20px 的边距来分隔名称。所以它看起来像：

姓名
职位描述
地点

姓名
职位描述
地点

姓名
职位描述
地点

等等

我对文本颜色也有一些问题，但主要问题是间距。

JSFiddle 到下面的代码： 

<style> .hed_Brown {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #996633;
      line-height: 18px;
      margin-left: 15px;
  }
  .hed_Green {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #7f9c99;
      line-height: 18px;
      margin-left: 15px;
  }
  .hed_Blue {
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #011e41;
      line-height: 18px;
      margin-left: 15px;
      margin-bottom: 20px;
  }
  </style>

<span class="hed_Brown">Robert Mazzeo</span>
<br> <span class="hed_Green">Load Out Manager</span>
<br> <span class="hed_Blue">Lakeland FL</span>

<br> <span class="hed_Brown">WJ Mahon Jr.</span>
<br> <span class="hed_Green">Sales Manager</span>
<br> <span class="hed_Blue">Jacksonville FL</span>

<br> <span class="hed_Brown">Charles Metzger</span>
<br> <span class="hed_Green">Display Assistant</span>
<br> <span class="hed_Blue">Wichita KS</span>
<br>
4

3 回答 3

3

为每个组使用一个容器是个好主意。例如：

<div class='contact'>
   <span class="hed_Brown">Robert Mazzeo</span>
   <br> <span class="hed_Green">Load Out Manager</span>
   <br> <span class="hed_Blue">Lakeland FL</span>
</div>

所以你可以给你想要的利润.contact。在这种情况下，您可能会添加：

.contact{
   margin-bottom:5px;
}

此外，我建议使用<div>而不是<span>and <br />，因为displaydiv 的属性已经打破了。更多关于这里的信息：SPAN vs DIV (inline-block)

于 2013-09-03T15:18:04.633 回答
1

这是一种方法：

http://jsfiddle.net/jonigiuro/GEkP8/1/

.hed_Blue {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #011e41;
  line-height: 18px;
  margin-left: 15px;
  margin-bottom: 20px;
  display: block;
}

span 元素，默认为“display: inline”，这就是你需要这些额外元素的原因

<br>

如果您将它们声明为“显示：阻止”，则问题已解决

于 2013-09-03T15:17:17.270 回答
0

在小提琴中，您应该删除<style>标签并添加属性display: block：http: //jsfiddle.net/GEkP8/2/

于 2013-09-03T15:18:24.590 回答