Question

我觉得这应该是一个容易解决的问题，但我很难过。我想通过＆＃34; list-block＆＃34;将列表中的每个项目分开（内联），但是我无法使用除div标签以外的任何内容来显示块，它会自动跳转到新行。我只想使用HTML符号（如下所示），但我想要CSS自定义。提前谢谢！

小提琴：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

如果您希望元素位于同一行并具有块元素（例如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

Answer 2

添加display:inline-block。

这将允许您在同一行显示<div>，或允许您为其他内联元素提供宽度（和高度）。

Answer 3

对于列表，通常使用list-style-type http://jsfiddle.net/UwsFL/2/

li {
    list-style-type:square;
    font-size:2em;/* to show that squares follow font-size */
}

但在标题内，ul没有地方:)。你使用html实体的方法是一个好主意，那么你可能需要使用字间距？ http://jsfiddle.net/UwsFL/3/

h2 {
    text-align:center;
    word-spacing:1em;
}

你也可以使用伪元素并设置它们的样式： http://jsfiddle.net/UwsFL/5/ (only in between)

h2 {
    text-align:center;
}
h2 span {
    display:inline-block;
}
h2 span:before {
    content:'\29eb';
    padding:0 0.5em;
}
h2 span:first-of-type:before {
    content:'';
}

或全部：http://jsfiddle.net/UwsFL/6/

希望这些例子能给你一些想法：）

常规'ol文本中的CSS

3 个答案:

JSFiddle