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

Question

目前我有这个：

<a href="" class="left">Get your prize</a>
<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; }
.right { border-radius: 0 20px 20px 0; background:darkgreen; }

a:hover { background:red;}

这是 jsFiddle：http: //jsfiddle.net/uKTFk/

这是我的目标： http: //i.imgur.com/AwLfn.png << 将带有“或”文本的圆圈放在两者的中间。

当然，jsFiddle 的样式还没有正确设置，稍后当我用两个“按钮”之间的“或”圆圈解决问题时，我会继续讨论。

帮助？

Answer 1

<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>​

更改其位置，然后使用顶部和左侧将其移动到中心。偏移量基于其父元素。

Answer 2

这样的事情应该会有所帮助：

HTML：

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

​CSS：

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;}

编辑小提琴 </p>

Answer 3

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

HTML

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

CSS

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;}

Answer 4

这是实现目标的另一种方法（添加div）：

http://jsfiddle.net/XU7Yq/