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＆lt;＆lt;把cirlce放在两个中间的“或”文本中。

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

Edited Fiddle

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/

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

4 个答案: