html - 常规'ol文本中的CSS

Question

我觉得这应该很容易解决，但我很难过。我希望列表中的每个元素都由“列表 block ”分隔(内联)，但我无法使用除 div 标签以外的任何其他内容来显示这些 block ，div 标签会自动跳转到新行。我只会使用 HTML 符号(如下所示)，但我想要 CSS 自定义。提前致谢!

fiddle :http://jsfiddle.net/sos12/UwsFL/

CSS:

.list-block {
  width: 1%;
  height:0;
  padding-bottom: 1%;
  -moz-border-radius: 1%;
  -webkit-border-radius: 1%;
  border-radius: 1%;
  background: black;
}

标签:

<h2>
   Apples 
      <i class="list-block"></i>
   Pears
      <div class="list-block"></div>
   Peaches
      <span class="list-block"></span>
   Plums 
      <a class="list-block"></a>
   Grapes  
</h2>

HTML 符号:

<h2>
  Apples 
    &diams;
  Pears
    &diams;
  Peaches
    &diams;
  Plums 
    &diams;
  Grapes  
</h2> 

Answer 1

如果你想让元素在同一行并且具有 block 元素(比如div)的属性，你必须使用display: inline-block。然后，您可以使用 margin 来控制它们之间的间距。:

.list-block {
    width: 1%;
    height:0;
    padding-bottom: 1%;
    -moz-border-radius: 1%;
    -webkit-border-radius: 1%;
    border-radius: 1%;
    background: black;

    display: inline-block;
    margin: 5px;
}

---

如果你想旋转元素使它们成为菱形，只需使用一个转换(note that this is CSS3 and is not supported in really old browsers):

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);

JSFiddle