如何在兩個按鈕中插入一個元素？

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 < <到cirlce將用 「或」 文本兩個中間。

當然，jsFiddle還沒有正確的樣式，我會在兩個'按鈕'之間用「或」圓圈解決問題時繼續。

幫助？

Answer 1

像這樣的東西應該有所幫助：

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

Edited Fiddle

Answer 2

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