Javascript 如何在css/html/js中排列半圆的元素

我似乎不知道如何以半圆形式标记短语列表（在所附的图片上命名为title1、title2、title3等）。 也许有简单的css交叉浏览器解决方案（没有，没有IE6，哈哈），或者我需要使用javascript？我不能将其作为图像插入，因为我要求页面上的所有文本都应该是真实文本

或者也许有一些Jquery插件可以解决这样的问题

---

提前谢谢

我会使用JavaScript和一些简单的数学来计算每个标题的位置。圆上x和y位置的公式如下：

x = radius * cos( angle )
y = radius * sin( angle )

因此，使用此项，您可以计算每个标题的位置：

elem.style.left = radius * Math.cos( angle ) + "px"; // angle in radians
elem.style.top = radius * Math.sin( angle ) + "px";

---

我制作了一个演示小提琴，展示了这一点：

Aw，太晚了，你已经接受了答案：）好吧，这里有一个代码包装成可重用的jQuery插件

工作演示：

这样使用：

$（'li'）。半圆（300,50200100）；​

代码如下：

jQuery.fn.semiCircle = function(cx,cy,radius,radiusY,startDegrees,endDegrees){
  if (radiusY===undefined)      radiusY      = radius;
  if (startDegrees===undefined) startDegrees = 0;
  if (endDegrees===undefined)   endDegrees   = 180;
  var startRadians = startDegrees*Math.PI/180,
      endRadians   = endDegrees*Math.PI/180,
      stepRadians  = (endRadians-startRadians)/(this.length-1);
  return this.each(function(i){
    var a = i*stepRadians+startRadians,
        x = Math.cos(a)*radius  + cx,
        y = Math.sin(a)*radiusY + cy;
    $(this).css({position:'absolute', left:x+'px', top:y+'px'});
  });
};

只是为了好玩，另一个答案，可能更重，但我已经在中间了：

希望有帮助
你试过什么了吗？如果这是静态内容，那么使用
position:absolute
放置它们应该很容易，但您在问题中没有提供太多细节是的，这是一个带有静态内容的促销页面。有一个问题-我们有不同的语言支持，在不同的语言中可能有不同的“li”元素编号，并且很难为每种语言更改它。。。我甚至想做一个jquery插件，它将计算红色矩形的中心点，然后将它们排列成半圆，但这似乎不是很容易：（非常感谢..对不起，我不能将两个答案标记为正确：'（不用担心；@William公平地击败我。下次我不会急于做出决定。你的插件真的很好！