Html 如何在两个按钮内插入元素？

目前我有：

<a href="" class="left">Get your prize</a>
<a href="" class="right">Live preview it</a>​

以下是JSFIDLE：

我的目标是：

或
​

---

更改其位置，然后使用“上”和“左”将其移动到中心。偏移基于其父元素。

类似的内容应该会有所帮助：

HTML:

---

​

根据您的说明，这将起作用：

HTML

---

下面是实现目标的另一种方法（添加

div

）：

---

太好了，它的效果很有魅力。我想我是想得太多了，忽略了这个简单的解决方案。非常感谢！记住对css3边界半径使用跨浏览器支持以避免丑陋：

-moz border radius

&

-webkit border radius

&

border radius

a { display: block; float:left; padding:10px 30px; font-size:12px; color: white; text-decoration:none;}

.left { border-radius: 20px 0 0 20px;  background:lightgreen; }
.right { border-radius: 0 20px 20px 0; background:darkgreen; }

a:hover { background:red;}

<a href="" class="left">Get your prize</a>
<span style="position:absolute;top:8px;left:126px;">or</span>
<a href="" class="right">Live preview it</a>​

<a href="" class="left">Get your prize</a>
<a href="" class="right">Live preview it</a>
<a href="" class="center">or</a>

a { display: block; float:left; padding:10px 30px; font-size:12px; color: white; text-decoration:none;}

.left { border-radius: 20px 0 0 20px;  background:lightgreen; }
.right { border-radius: 0 20px 20px 0; background:darkgreen; }
.center { border-radius: 20px; background:red; height: 15px; width: 15px; 
position: absolute; left: 120px; padding:2px; margin-top: 7px}
a:hover { background:red;}

<a href="" class="left">Get your prize</a>
<img src="" alt="" class="middle"/>
<a href="" class="right">Live preview it</a>

a { display: block; float:left; padding:10px 30px; font-size:12px; color: white; text-decoration:none;}

.left { border-radius: 20px 0 0 20px;  background:lightgreen; }
.middle {position: relative; float: left; margin: 5px -10px 0 -10px; z-index: 20;}
.right { border-radius: 0 20px 20px 0; background:darkgreen; }

a:hover { background:red;}