1

如何设置这样的列表项样式？

在此处输入图像描述

所以在文本之前有某种彩色方块。我正在研究这个但找不到它：

http://www.w3schools.com/cssref/pr_list-style-type.asp

它们不必是列表项，但在我看来它很方便，因为它是某种列表，我想在同一行中设置样式和显示，而不是像上图那样在不同的行中显示。

我试过这个：

<ul class="ordering">
<li><div></div><span>One</span></li>
<li><div></div><span>Two</span></li>
<li><div></div><span>Three</span></li>
</ul>

和这个 css ：

.ordering {
    list-style:none;
    min-width:250px;
}
.ordering div{
         width: 12px; height: 12px; float: left;
    }
.ordering span{
        display: block;
        float: left;
        font-size: 11px;
        line-height: 11px;
        padding-left: 5px;
    }

我遇到的问题是我无法将它们分开（它们粘在一起），另一个问题是当我有许多不适合ordering班级大小的物品时，它们会断线，但正方形仍然在前一行所以 square + text 不被视为一部分。

4

6 回答 6

0

我认为你不需要浮动任何东西：

.ordering div {
     width: 12px; height: 12px; display: inline-block;
}

.ordering span{
    display: inline-block;
    font-size: 11px;
    line-height: 11px;
    margin-left: 5px;
}

（如果您希望它在 IE 7 及更早版本中工作，您需要将其更改<div>为 a<span>或其他一些内联元素）例如：

.ordering span.colouredSquare {
     width: 12px; height: 12px; display: inline-block;
}
于 2013-01-08T11:56:43.450 回答
0

我遇到的问题是我无法将它们分开（它们粘在一起），另一个问题是当我有许多不适合订购类大小的物品时，它们会断线但正方形仍然在前一个line so square + text 不被视为一部分

你需要做的就是给你的li元素一个 display 属性display: inline-block。这应该可以解决您的间距问题并使正方形和文本作为“块”移动，即

.ordering li
{
    display: inline-block;
}
于 2013-01-08T11:59:29.123 回答
0

你已经以正确的方式尝试了。唯一额外的事情是您可以最小化 html 结构并使用nth-child()属性

HTML

<ul class="ordering">
<li><span></span>One</li>
<li><span></span>Two</li>
<li><span></span>Three</li>
</ul>

CSS

ul.ordering {    list-style:none;   min-width:250px; }
ul.ordering li{ 
  display:block; 
  clear:left; 
  vertical-align:middle;  
  font-size: 20px;
   line-height: 20px; 
  padding-left: 5px; }
ul.ordering li span{  width: 12px; height: 12px; background:red;  display:inline-block; margin-right:6px }
ul.ordering li:nth-child(2) span{ background:green !important;  }
ul.ordering li:nth-child(3) span{ background:blue !important;  }

现场演示

于 2013-01-08T12:01:19.980 回答
0

或者，您可以通过伪元素的力量稍微清理您的标记。

HTML（注意：列表项只有一个子元素）

<ul>
  <li><p>Bender</p></li>
  <li><p>Fry</p></li>
  <li><p>Leela</p></li>
</ul>


CSS

ul { margin: 10px; }
li { position: relative; }

p:before {
  background: #bb3333;
  content: ".";
  display: inline-block;
  height: 10px;
  margin: 0 5px 0 0;
  text-indent: -10000px;
  width: 10px;
}

li:nth-child(2) p:before { background: #33bb33; }
li:nth-child(3) p:before { background: #3333bb; }

看我的小提琴：http: //jsfiddle.net/uNR2M/2/

而不是nth-child我认为我会应用类，因为它的性能稍微好一些。

于 2013-01-08T12:20:34.780 回答
-1

这应该可以解决问题：

<li>
    <div></div><span>One</span>
    <div class="clearfix"></div>
</li>

您应该在结束 li 之前添加一些 clearfix。

.clearfix {
    clear: both;
}
于 2013-01-08T11:57:03.910 回答
-1

我不会使用本机列表要点，因为这些要点不可样式化。您可以使用嵌套的 div 和 span，但 IMO 设置:before伪元素的样式更简洁，例如：

演示

html:

<ul>
    <li>item</li>
    <li class="red">item</li>
    <li class="blue">item</li>
</ul>

CSS：

li { 
    position: relative; 
    list-style: none; 
    display: inline-block; 
    margin-left: 30px;
    }
li:before {
    content: ' ';
    width: 10px;
    height: 10px;
    position: absolute;
    left: -20px;
    top: 5px;
    background: green;
}
.red:before { background: red; }
.blue:before { background: blue; }
于 2013-01-08T12:09:12.713 回答