0

看到这个

我正在尝试获取一串数字并在它们周围放置圆圈。如何让它们显示在一条长水平线上，而不是每条线一个圆圈？

07、06、08、02、86、05、01、03、88、87、04

<div class="numberCircle">07</div>, <div class="numberCircle">06</div>, <div   class="numberCircle">08</div>, <div class="numberCircle">02</div>, <div class="numberCircle">86</div>, <div class="numberCircle">05</div>, <div class="numberCircle">01</div>, <div class="numberCircle">03</div>, <div class="numberCircle">88</div>, <div class="numberCircle">87</div>, <div class="numberCircle">04</div>, <div class="numberCircle">07</div>, <div class="numberCircle">06</div>,<label><b><del>08</b></del>, <b><del>02</b></del>, <b><del>05</b></del>, <b><del>01</b></del>, <b><del>87</b></del>, <b><del>04</b></del>, </label><br>

基本上我正在尝试复制 这个。

4

5 回答 5

1

使用 CSS 浮动：

div.numberCircle {
  float: left;
}
于 2012-04-25T03:04:25.977 回答
1

简单地不要使用div元素，它们是块（你要求没有的）。如果数字没有意义（不太可能），您可以使用内联的span元素（display: inline-block;在这种情况下为 with）（基本上是您所要求的）。 float: left;也是一种选择，但 CSS（样式）决定应该在 HTML（含义）决定之后。您更有可能应该li在有序列表 ( ol) 中使用元素。

于 2012-04-25T03:11:21.057 回答
0

尝试：

div.numberCircle {
    float: left;
    clear:none;
}
于 2012-04-25T03:09:00.417 回答
0

display inline-block嘿，现在您可以像这样定义您的 div.numberCircle属性

div.numberCircle {
display:inline-block;
   zoom:1; // for ie
*display:inline;  // for ie
}

现场演示http://jsfiddle.net/rohitazad/QYSvB/

于 2012-04-25T04:10:09.637 回答
-1

嗨，您可以通过CSS3 边框半径属性轻松地为您的号码添加圆圈。

如果您在代码中正确使用 PIE.htc 来支持 IE 边框半径，这将在 IE 中工作。{PIE 代表渐进式 Internet Explorer。它是一种 IE 附加行为，当应用于元素时，它允许 IE 识别和显示许多 CSS3 属性。}

我使用CSS3 反增量属性在有序列表中制作了代码，以根据您的演示图像获取结果。

查看演示：- http://jsfiddle.net/UjfBZ/10/

于 2012-04-25T06:44:09.453 回答