如何在铬合金中创建像标签一样的按钮,在右上角最多可以关闭它 [英] How to create button like tabs in chrome with cross on the top-right most to close it

查看:53
本文介绍了如何在铬合金中创建像标签一样的按钮,在右上角最多可以关闭它的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想创建一个像Chrome中的标签一样的按钮,最右上角可以关闭它



我尝试了什么:



< button>主数据< / button>

i want to create a button like a tab in chrome with cross top-right most to close it

What I have tried:

<button> Master Data </button>

推荐答案

Afzaal给了你一个好主意,但可能需要解释。以下是您的概念证明:

Afzaal gave you a good idea, but it may need explanation. Here is a proof of concept for you:
<html>>
  <head>
    <title>Styled button demo</title>
    <style>
      button {
        position: relative; height: 4em;
        padding-left: 2em; padding-right: 2em; }
      span.close { position: absolute; top:0; right: 0; }
    </style>
  </head>
<body>

<button>Normal button text<span class="close">x</span></button>

</body>
</html>



元素按钮仅作为示例;在你的代码中,它将是你用于选项卡的任何东西,可能是带有特殊CSS类的 div 。元素 span 和字母x也只是例如。当然,您需要设计一些图形元素,而不是它。确保删除所有不需要的边距和填充,以精确定位此元素。在这个元素上,你还应该添加 onclick 处理程序。



这就是全部。有问题吗?



-SA


The element button is just for example; in your code, it will be whatever you use for the tab, probably a div with special CSS class. The element span and the letter "x" is also just for example. Of course, instead of it you need to devise some graphical element. Make sure you remove all unwanted margins and padding, to position this element precisely. On this element, you should also add the onclick handler.

That's all. Any questions?

—SA


这篇关于如何在铬合金中创建像标签一样的按钮,在右上角最多可以关闭它的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆