Question

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

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>

基本上我正在尝试复制 this

Answer 1

使用CSS float：

div.numberCircle {
  float: left;
}

Answer 2

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

Answer 3

尝试：

div.numberCircle {
    float: left;
    clear:none;
}

Answer 4

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

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

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

Answer 5

您好，您可以通过 CSS3 border-radius 属性轻松圈出您的号码。

如果您在代码中正确使用PIE.htc for IE support border-radius，这将在IE中有效。 {PIE代表Progressive Internet Explorer。它是一种IE附加行为，当应用于元素时，允许IE识别并显示许多CSS3属性。}

我已使用CSS3 counter-increment属性在有序列表中创建代码，以根据您的演示图像获取结果。

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

CSS / HTML - 带圆圈数字的水平线

5 个答案: